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献给 Netscape 的众位先行 T 早■在上个世纪， 他们 对万维网的梦 
想就已不只尾 •本 虽然冇 i 午多链接但缺乏任何行动的大型在 
线书 箱”， 

当然，他们的梦想也制造出可怕的 < blinb 标签……男干圆梦， 
但別冲过头了！ 
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关子作者 


《深入浅出 JavaScript 》 的作者 



Michael Morrison 与电蚺 世界 结下不解之缘的开端 > 就是他的第一 
台个人电脑 T 1-99/4 A , 配件包栝至高无 J -_ 的人体工程学键盘，黑白 
TV “ 显示器 w ,迹有那甜美的长式带存储系统。往后的岁月 M, 他 
父曾拥有过其 他赵啮 ,不过仍然时时怀 念:畚 当年在 Tl h 把玩. 
Parsec , 在后院玩 isferf 足球的 日子， 

现在的 Mwhael 己经长人成人，兴趣也变得比较成熟一点，例如逹立 
交互 N 络应用程序……还有疳板。割伤，擦伤，大伤小伤小断，他鉗 
对枝术挑战的方式实与挑战极限运动时一样冇35无谋 t 在开 发过几 
款电视游戏 t 发明过儿种玩具，写 f 快50本逑立许多在线课程 
fd , Mkhaei 终子贷 得可 以向对 《深 人浅出 JavaScript ] &的挑战……他 
以后再也不相信 g 己的感觉 

事宪上，函封 14 深入浅出”系列的写作时，+可能有准备好的那一 
天。选择墨花斯手中的红色药九，进入 Head Fim ® 客帝_ ( Matrix ) 
的世界 T 已经是品佳准备途径了，当 Michael 从另一个世界中61來后 T 
身上也坯残留若哿力较陡下的淤靑，他看待学习（与教学）的眼光:完 
全不一样了 ■> 这是多么令人兴奋的.-件事啊丨现在这.个时候，他大概 
正与老婆一起在辦鱼池边，反思茬交互性万维网的神妙之处， 
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如何使用本书 

谁适舍锿迖本书？ 

如果下 列问题 你都啤 答“是 


①你使用的电脑安装了 Web 浏览器 1 文本編辑器, 

而1可以连接 Internet 吗？ 戟扪将热 站丈 

@ 想要学习， fm . 牢记如何创建活色生香的网匕"'^ 

页，把全球资讯网转变成真正的互动体验吗？ 

® g 欢香艳刺激的晚玄对话，胜过枯燦乏味的学 
术演讲？ 

那么这本书正是为你而写， 


谁或许应淡迗离迖本书? 

如采下列问题你都回答“迠"■: 


① 


你垃个网页创违世界的新芋吗？ 

(虽然不需是位 HTML 界的大师 + 但至少该对 
网页如何以 HTML 与 CSS 组成，如何把 ㈣ M 放 
上网络有点基础的 r 解 。 f 


本半 0 常法含作为 “ Tint 
HTMl mth CSS Sl XHTWiL 》 的砭 

伸 ( IK 產，如廑充人 5 矜 
HTML 技木.说饵切棘 一 下， 


(2) 你已经是 S c H pt 流派的一流高手， iT ■:在4找 
Jav aScri pt 的失 f 专秘沒吗？ 


© 你宮怕尝试+同的事物吗？宁可接受牙根管治 
疗（抽神 经）， 也不愿 E 混搭条纹与花格子布？ 
你认为枝术性书鞯若为 ja^Script 代吗陚 ，人性 T 
则不够认真严肃吗？ 

那么这本15保证不符合你的期 空。 


本羊这合 ㈣㈣ 料卞老 , 
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我们知遒你在想什么 


“这怎么吋能是一本正经的杩序设 u _ 书緒？ 
“这一堆图是干嘛的？” 



你的太脑渴望新奇的事物，它总足在搜素.妇描 L 期待若不导常的事物。 
人类的大脑十.来如此，正是这样的特质帮助我们常保活力,仵竞令激烈的 


生命树丄存坫至今 & 


至于每天都要闹对一成不变 1 平淡无奇的事物，你的大眙乂作何反 
应？它会尽 ft 阻 [ h 这些車去干扰大脑的真正工作_ -记录真正 m 耍的 


大脑不会浪费脑细胞去储存允聊的事 t 它们绝对无法通过显 


然不 1 耍"的过滤器。 


■ m 攰，有个问题，你的大脑正甙罔帮你 忙， 它试若确保这件 
然不甫耍”的唭，不会占 m 有限的资源。毕蔻，资源敁好用来 
储#苒正的太亊， 如 老虎、火灾焱#绝对不应泫穿 m 裤玩滑负 


\ h ] ji 也没冇简单的方法可以告诉你的大瞄： " _袋呀！拜托你 
啊……不管这+ 书多枯 燥 4 多让找作件欲睡，还是谪你把这控 


内荇全都记下来„ 


“这样真的会 t 卜.我学到东西叫？『 

我们也知通你的大賒在 S 计么 




大_究竞怎样知逍什幺足重耍的本？假设你去郊游 T 
你的眼前，你的太脑和身体会怎样反应？ 

神经元被触发、愔结激动， 1 样上躲 索激增 D 


那就是太脑“知 m w 的方式 ■ 

这绝对重要，别忘了! 




只 «T 


600 






而丘唓的妗容 


iSt 气 




但是，想象你是在宗里或图书馆. 一个 安金、温暖而辻没有老虎 
出没的坏境，你正在用功准备考或者研究某个枝术——你的 
老板认为盅鸯一周，顶多彳 -天， 就能完成的难题。 


突然冇 M 老虎眺到 


目前位黄 ► 
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如何使用本书 



Head First " 的谈老视为 


XXVJ 


rr 二 r 二二 学二】 
===:二，敝 我们 知綱娜袋畫，狀 

m ^■兴奋 .- k 

Head First 学习守则； /\ 

视觉化 □ 图像远比纯文字更 ㈣ 挪，让学习更 y ^ 

像-茄不是把文字放在_下或后 - 瓦可让学习者在減相糾, 

问恶时 . 潜力黾多搔高两倍 * j f 錡 

使用对话式柳人__._獅講蛛1 

改 ㈣ -人称_度' ㈣ 式的风齡接4 -- 

f ； t ' ■时.料純 W 祕酿邮骑 4a%fl 晚奋伴 

on ftCl " . ㈣ ，娜_□语職正細舰 1 贴过严肃]卜 

^的且边■鱗堂上_说，雜-种比较 ㈣ 引起你赃 意力？ 丄 

让学习者更深入地思考：换句话说，餘非主动娜神屯 
会有_为。儲必须受到刺 激. 亲身参与 

崎編盟得出结论并旦形成新知识 。 为达此一議 . 你蒂要礼 ' 
辟刺鮮輔 ㈣ 与獅，_崎财:城的 t 

^ 者力 我彳 n 都有这样的经验：#我茛的很想■学会这个东 

引起 一并 ㈣ ■了/ _■ 辟注 ㈣㈣ ，有趣，怪 

j ==乎二紙，亂眺 技 ^的主^瓣必娜味肩 

__不觉得无聊，你的大脑学习就会加快讲多 " 

拨动械韻鋒挪 

会记得自己在乎卿.当你心有所娜 t =住是败 

当你解开狼_人_==，有^，- 1 ：我好 
Bob # 得轉时，当下产仰' 

棒 I ™ 这类的情锗与感觉* 
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无 认知:想想 如何恩考<_ ] 

如果真的想学习，想学得虹快，更深入,那么，淸注意 ft 己如何■'注 
意 " ，想想如何思考,学学如何学习。 

大多数人在成长 H 程中并未修过元认知或学习理论的课程，师长们期望我 
们学月，却没有教导 a 们如何宁习 D 

o 

我们假设大家拿若这本书，是为了学习打造最热门、段发烧的交厅式闽 
站，但乂+想花#人多学习时间 D 如果有寇使 ffl 刚从书+得到的知识 + 你 
必须 k ! 估读过的东西.而在记住前，必 M 先理解阅诶的内容 . 想垫从本书 
<成任河书藉与学习经验）得到锻多的利益，消为你的大脑负贵， Lh 你的 
大脑好好注惹这性 ㈧ 容。 

r ； Lh 大脑认为你 IF _ 在学的新知织确灾很亜耍，与你的生死 
丈，就像跳到你面前的食人虎 & 否则，我心 就会不断陷人与大 
帖的苦战 t 老是 E 不住新知 tH 。 

好吧！该如何让大脑将 JavaScri 舛视为 一只饥饿的大老虎？ 

有慢又咚嗦的占法，也有快乂有效的 方法， 慢的方法就是多读化 
次 & 各位想必听过 " 勒能补拙 10 s 只耍重锭的次数够多，也能够学会并记住 
敁乏味的知识，你的人脑会觉得：然感觉起来不怎么重耍，讯他却 一而再■■再 
而三地左读这个部分，所以应该是 i 要的吧【 ™ 

较快的方法则是想办法增进大_活动 + 特别尨+同类切的大脳话动。前贞出现的棄 
材铣足解决厶案. LiitF . 灾有助干大脑运作 t 研究 阽示， 文字若放在它所描述的闱慠 
内（咖不是翌于豇阂内其他地方，如罔说成内文） T 杆助千太脃逮立阁文的关眹性, 

而且.触发 E 多的神经元，越多的神经活动=大|1越容 M 把这个内容视为值得注哀;的 
信息，也越可能记录 T 来， 

对沾式的风格也相，有帮助，意 识到 fJ d 正在与人对话时，我们会付出更多的注意 
力，我们必须贤起环朵 t 注盘辂个对 t 占的进行、跟上双方的谈话内荇*神钎的是， 

你的大脑根本不在 f . 那珐人0本叫的1 - 方面乂 如果写作风格旣正式 

又枯燥，你的大脑会以为正在聆听一场演讲；自己只是一个被动的听众.根本不需 
要保持语龊。 

然而，图像5对【5-式的风格只不过垃，个开端 L 

ifvil ： 元认知 ( Meiacognitiwi }. 教有心理乎专有芯词, 兮理学习知汰知的过租> 埒加学习 

的效果- 自前位黄 ► XX Wi 
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如何使用本爷 


我们的 做法: 

我们使川图像，因为你的大脑对视觉刺激比较有感觉，而非 - 文字。 对大脑而心，一 
张阁胜过千 J 万适。当文字和 S3 像志耍合作时 . 找们将文半嵌入阁像 >tt T 因为文字 
若是位 T 扣关闱像中，而不娃埋在图说成内夂的某处，大聃将运作得比较有效率。 

我们萤氣表现相同内容，以不 R 的表现方发.不冏的媒介、多屯的感知 T 一再叙述 
相间的丰物 L 我们的策略 U 的就是；将 A 容烙印在大秘+同 K 域， itifij 增加 ii ! 住的 
机会。 



我们以轺乎预期的方式使用概念和图像 t 因为大 E 遇到新鮮有趣的亊，波长才会与之 
同调 B 我们使用的概念成多忐少 H 有情绪内容，也是因为大睡的设计在于注意 
怙绪带來的生物化学反应， U: 我们冇怙绪感觉的事％ A 然比较容岛记件. U 卩使即些感 
觉不过是“幽斅 ". "惊讶 ” M 有越 r . u 笑话很难笑"箅等。 

我们使用拟人化 1 对活式的 R 格， 因儿当大脑扣愔炻正处于对话中而不是被动地聆听 
rmu, 便会付出更多注意力 —— 即使你的交谈对象是一丰节。电就是说，吊然实际 
上在 w 问读 " 对话，大脑还是较 x? 活跃。 






我们包含 fso 个以上的练>丨活动，比起死读硬 Ui ， 人脑从做 I 彳 1 学的学习与 i 己忆效恥都 
更好 D 我们让习题维持在 典有 挑战忡仉乂可以完成的程度，闲为大多数人#欢挑战后 
的成就感。 

我1_】使用多种教学风格.冇些人可能比较冉欢桉部就班，有些人菩欢先了解幣体大 
綱， 冇扭人 则毐欢 £核#枰庁代码范例……然而 ， +管炻垃哪■类学习风格 + 都能够 
受益千本择以不 M 方式表观相同内容的手砝„ 



+书的设计 I㈤ 时考虑到左脑与右脑,越多脑细胞#与，越有可能#会并记住信息 + 而 
氙保持吏长时阎的专注力。使用一边的人帖，往往意味街另-边的大脑有机会休息. 
遂得以述长专心学习的时 间， 也吏有效率 a 

我们也会运用故亊和 练习， 呈现多重现点，因为当大脑被迫进行评估与判断时，学习 
效果将史为深入- 

f ? 中也有相当多的挑战题，虽然极出剜题、却4、见得立刻提供答泰。我们的川意是比 
大聃努力工作 t 才能学浔钯多. i 己得史丰。你想一 想： 只是看別人运动，苻办法达到 
m;m 身的效果呜？间时，我们尽力确保大脑的努力方向正喻 . 以免比你花费、 k 脑 
力，却用于处珂难以现解的范例，或者难以剖析，充满行诂、咬文嚼卞的论述 B 

我们逐会使用 人物- 仏故亊. m 像与范例中.处处都是 人物， 因为你也足人 f 你的大 
脑对人佘比对車物史加注意 . 

jtxviii 序 
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驯服大脑的方法 


好吧，咳做的我们都做了，剩下的躭辟你这 M 介绍一 
呰技巧，恒 H 是一个幵端,你应该倾听你的大眙，看看哪 
呰对你的 人腩 冇效，哪岬无效。试试希吧 .！ 


沿本踐 g 下 . ^ Heitp Klttjf 
错裨钻在本辟 I ； = 


0慢慢.来，理解越多，越不需要强记. 

別只 颐若翻 m ' iEL 得停 F 来，奸好思 ■朽 
中极出问题財，别完令不思考就 fi 接苞答荽 a 
想象是另外一个人面对面地向你提问，如果 
能够迫使人眧思片得圯深人，躭越有机会理 
解伴记得更多的知识。 

@動做练习，写下 心得。 

我们往书屮安排 题， 如采你光看+做， 
就奸俛躺作床 1-- 召粒 电觇中的美女姐姐卖力 
做若 E ! 身运动……你这样垃瘦不下来的。使 
用铅笔 作答。 大货证椐 4 i 示、教学当中的灰 
体沾动可增加学习的效果， 

@ 认 真阅读“没有■问题”的 单元， 

作细阅读所有的 1 ■役有*问题" a 这可不是 
无关紧耍的说明，而适核心内容的一部分！ 

T 万别 忽略！ 

( T ) 将阅读本书作为睡前最后一件事，至少是 
睡前最后一件具有挑战性的活动， 

学习的 -部 分反应(特别是转化为长期 E 忆的 
过程）发生在放下书本之后 。 你的人 脑志 翌:进 
-步处理新知识的时间 a 如果在处理期间塞进 
艽他新知识，某些刚学过的东西将会遗央 a 

(|)喝水，多喝水 & 

你的人脑葙 婴没泡 在丰沛的液体（译 42 ) 内* 
才能运作良好，晚水（往柱发生在感觉 I .】湛 
前} 会减缓 k 知功能 a 

谇 ； il ； & 中报4相出、大路的 f 量有叨渑 由禾拉 成=< 


( S ) 念出 声音， 大声念出来。 

“说话 1 "将驱动大阽的不同部位 。 如果盂耍邱解 
某项亊物或试图增强记忆，请大声说出來，解 
扦给別人听的效果吏你金学得觅快，甚至 
触发许.多新想法，光犇阅成无法有这种效果。 

© 倾听大脑的 声音。 

注盘你的人脑是否过度负荷，如采你发现 fill 
开姶恍神，或者过 R 即忘 , 就是应该休息的时 
敁 - 3你错过某些茕点时 + 诘放慢否則 
将失去吏多， 

( S ) 用心感受！ 

必须让大脑知道这一切都很•鼓要。成卷 m 人故 
車情境-力照片加上白 cl 的说明、即使是抱怨 
笑话太+好笑.部比奄无感觉吏奸。 ft 何桁绪 
反应对学习效裝都冇帮助 * 

(?) 动手吧 [ 

学习 JavaScript 只有一种/_/式：试若多多设计 
JavaSc - ript 代码。这本书就是要你动手做。不要 

略 ii ： 我们提出的 JavaScriptJ ] 题-“学？ T 经 

常发生在解决 R 题的时刻，就算书中解决的 
41 火柴人人笪险 " 1 '' Mandatigo 电彩院划位程 
序"成 “ Yr ^ Cube 两客”这类情頃 f •常好像不太 
常遇到……（干笑）。诘竖持做完习题，苒糊 
开 下一页 的内咨。对了，如果你罕就想做个交 
互性 ㈣ 站的话 s +如一边看书，-边尝试刚学 
到的 JavaScript 枝巧吧] 

目前位置 ► xstlx 
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如何使用本书 


褛我 

这怂-段学习经验，而不是一本参考用啦。所有阻碍学习的东 西' 我们部会刻意排 
除 □ 第一次阅谈时，你必须从失丌姶，因为本书对读者的知 识背钱 做广-些假设 t 

我们以 11 必知 h 的 JavaScript 怍为学匁基础。 

如果你想 — f 解 JavaScript 的演进历裎，洁你兄諍高明，我们不符合你的甫求。本邻的 
□标在于传授加何以 JavaScript 建立既皓炫又实用的元紊，以扩增网页的互动性.让 
网页变成有应有萏.大克想玩玩者的网络应用程我们放弁 HI ! 式托节，只让各位 
#到必须知道的 JavaScript 概念—— F 实际 Jg 谢 . 建立实除疋桌的 JavaScript 概念 c 
我们非常实际地考虑过嘐！ 

我们并未放入 JavaScript 语言里的所有细枝末节。 

虽然岈以巨细靡遗地涵盖所有 JavaScript 语句、对象 h 丰件或关键字，但各位应该不 
想川起.轰机把这本书从卞〕桌上运到此穿中心吧？本屮尨非常优秀的健脑谈物，加來搭 
ffii 铅笔 T 效米会更奸，我们若甫丁-各位必须知逍1使川 javaSeHpt 时幻％常用的知 
识- 3你了解本书 A 容后，将能带右0信，，/-找打造杀手级梦幻程序码的深起方法 ， 

闲为 JavaScript 包含广大 内迓 函饺库（可屯笈利用的椏序代蚂 ） 、 当你在处押. 
标准 JavaScript 代码时. E j 处蹄 .你自己创违的 ft 定义代抖不同，现解它很1贵。 
/_ L 是#到"自定义”一词的出现，表示这段程序代砰需由各位行设 U % 而不进 
Jav aS L ： ri pt 内况的-部分 n 


我们鼓励大家多用几种浏览器搭配本书 D 

迅然 ifT 面丄常见的浏览器都支持 JavaScript , 但各京 I —商处 现 】 avaScrip [代 fi 1 〗 的方 A 却 
有微妙的不同。 所以，我们鼓励大家至少挑选两祌域新的常用浏龊器，以 M 检査脚丰 
执行的效果。我们发现 Firefbx 日前有助干追踪 LvaSenpt 代码的锚误，但总 ifii 言之， 
你的脚本必须各种浏览器上都能产牛 .一 致的效果。讲到测 U ： hvaSdpt 代码，別犹 
m , 请把亲朋好友, n 争:熟人，阿猫阿狗都拖下水一起测试 吧! 


XXX 序 
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不要略过任何活动。 

习题与活动并非附加的装饰品，而是本书核心内容的一部分 t 有些协助记忆，冇些 
浞进理解、有些冱可以帮助应用。所以，谓不要略过这些习题 u 填屮游戏进 唯一非 
必要的部分，但是它们提供不同情境，帮助大 脑用另 个部位间颐学过的关键字与 
术语、屮文版 m 然翻译了提示， m 答案还是英文哦，如果你真的很不育-欢弄乩羌笼 
的书页，也可以不做恨这样就不好玩了。 

重复是刻意且必要的 D 

我们萁頓 “HucJ F ' irst " 系列能让各位 K 正学 到东四 * 希蟪你能够 【 d 住谈过的内容 - 
大部分参考 ffl 卜〕的 LI 标并不包栝知 UUll 忆的保 存与 触发.但本书的 S 点是学习，所 
以里耍 内容会一再出现以加深你的印象。 

程序范例尽量 精简。 

我们的读者反映，不希望看到书中列出200行的 ® 序码，其中却 H 有 两行是 主魍的 
关键 。 本书尽设把程庁代码缩短_比学习的 过稈诏 晰冏单 ■: 请别以为所苻的程 字代 
码都 m 强健4綠，本钙的程卬代矾汉作为辅助学4之川，功詎不 处得完 ® n 

我们把所有范例的完链代码放卜.叫站. 疔便大 宗鉍制5粘贴到义本编辑软忤上。你 
也可以在接在 线试用 JavaScript 的效來 a 淸# 考： 

http ;// www . headfirstlabs + coni / books / hfjs / 

“动动脑”习题没有答案 g 

窠些“动动瞄"习题役行以定的答桊，另有坫岬 d 题所迠发的学 A 经验，則在于曰 
我判定正确应用的 时机。 在某拽练习中，我们会提供暗示，指弓 I 正确的方向 • 黹要 
转动的东两就是你的 A : 腩 -- 感受躺之咙力吧 [ 
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审阅团队 



技本审阅©队 

TW Scamhdi Fletcher Moore Elaine Nfilsow 


Stephen Tafkut 


Wex lee 


技术审闻： Katfedrte St, John Zachary Kgss^ AntboMy T. Bofdener B 

AUx l cc 就谈千休斯顿大学 T 
+. 修管理佶总系统。他兹-欢 
跑少、电: F - 游戏々三更半-夜 
研究新的程序语言6 

TWScannHl 来〔1 Oregon 
的 Sisters , 从1妁5年就开 
姶微调比恃相关举物，目前 
是 Ruby on Rails 的开&者《 

Elaine Ndson 设计网站的经历已近十年 a 她曾对母亲大人说过,英国文学的文凭到哪里都很好用。她目前的 
作品与苒奸，都能在 山⑻ 时心 h - m 1_ ■看到。 

Fletcher Moott 是乔治#_科技学院的网络开发0与设计师,在休闲的时候，他热爱骑自行科' 园艺，还 
是红袜队的球迷。他与赵子 Katherine 、 女儿儿子 Salehd 定尿在服特兰大城。 

Anfhtitiy T . Haldcn « r〗II 是网络应>|彳程序丌发师.也是 《 Ajax : The Definitive Guide 》 的作者 n 

Zachary 在仝球资讯网甽开始萌芽时，就 CJf 始在 上商丌 发程庁，大约有15年左右 6 他勺荖 P 和小 
孩部住在以色列 - 

Katherine City University of N^w York 的计锌机科学与数学副教授 ， 她的研究屯心在于 LI -算机生物 

学和随机结构 。 

StcpheciTaUcru 在出纳西州的纳什维尔生活及 I :怍1〗」要开发运动应 用程序 t 件应付为人父母的混沌状态。 
当对前述任务稍有余力时，他喜欢玩滑雪板，闹 aiH 在准备第一项专怯 —— 快秘組如 L 

RXXii 序 
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致谢 


给我的编辑 j 

还记得小学时候，学校会指派你和某个 K 他地方的小枝当笔友，然后你们就 
汗始通过纸笔分笮彼此的 牛活 吗？项円丌始后， C ^ herineNolai ^ 然而然地 
成为找的 u 深人浅出”笔友 D 不过， 我们 的交浼会通过 屯话. 4:线聊无客户 
端, 4 .f 邮件 T 传 真机， 以及任何能用 OMG (Oh My God ) . LOL {Laugh 
Out , Loud ) , BHH (Bless Her Heart ， 这句是我的最爱)的丧西 》 在创作处程 
中, Catherine 術斯不兒是我的 “JavaScript 认知学习的在线合作伙伴”，她戍为 
我的朋关干 JavaScript 的 14 业务 w 会谈， 可不会每次都逐渐扯到房 M 整修 
……然后再扯回正题。在这次疯狂的著卜〕过枵中，很萵兴能有这位经盼老到的专 
家,陪我走过高潮与低潮 。 谢谢 Catherine ! 我还欠你奸几个潜_堡, 



Ncr(fl H , Phi 犮 ft 亂斜 
夯衫琏 +.3 和」 ffi 书分走法 


给 0 Reilly 小组 t 



设锖合神. = 


我对“深人浅出”小组的感谢存如岿滔江水绵延不绝，不过我兑试 
荇说得更具体 • -点， 


0 T « t £ / VkUc ^ il^n . ':菜 

入残迮_' 述位获 
蒂£ 掙芍* UI 夭玢 



Brett McLaughliii 在 Head First till 练音里， ~ 1 开始就把我 X 给疯狂的 
教学心理之狼，而 fl 不 lb 我遐缩。这位先生对于学刈过杩的逆叫工 
程学的认真程度 + 就像面对他的吉他一样。我想他在_ 
ml ■定罕少 D 问一次：“我的动 R 是什么？ rt 帆囚为 他 
的不懈不怠 T 才造就这么好的一本书，谢谢 Brettl 


Lou Barr 适我痄这个项 U 中的另，位虚似笔友，也垦关 
千羌英差好 的文化 (她家在英 ㈤ ）。我觉得.设 II - 
之神其的只是料时把她沿给我们 KM 。 如果没有她的逝 
法， 本朽的编排裉本+可能实现， 


Sand 奶 Khinfeld 的运作比较肸默，仉印推动生产过 f T V 与及时搵供“不可逃 iiT 的大观 
念时，总是能感觉到他的存在， 

在致谢的部分，$然不能遗忘其他 O ’ Reilly 团队成员 。 Laurie Petrycki 准 L 午这个 
项目通行, Caitfin McCuUo ugh 货责 管理# :个杀手级的支持网站 ( blip :// www . 
h ^ drirstlabs . com ) ,还和隹确地填满项 H 空隙的 Keith 谢谢大家！ 


插应，对 Katfay Sitrra^Bert Batei 对 T 1 H 深入沒出”系列的恩裔.，依得献 h 最大的谢 
I 我真的很髙畀能成为其中的一分子…… 


目前位.茜 ► xxxiii 
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你的大脑想专心于 JavaScript 。 你 f 襟危坐地 投人学 习， m 你的大_ 

一直他眠若你，它说这种学习一点也不你的大脑说，大脑的空间应该 
储存吏萤要的丰，如应该闪避的野生动物，或者绝对不应该穿短裤玩滑嘎板， 
我们该如何欺編大脑，让它觉得学习 JavaScript B 你的生命安危总息相关？ 


谁适合读这本书？ xxiv 

我们知道你在想什么 X 3 tv 

元认知 i 想想如何思考 xxvii 
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交亙式 R 络 

感觉虚拟世界 

不想只把万维网视为被动网页的同义词吗？ 

我们完全了_你的心情 u 被动的佶总应该留给 w 这种形式 4 书箱适合 
阅读 I 学习，述有很多很多用途，但与交互式…点关系也没有 t 如果少了 
Uv & Sctiptr 万维网就跟书没什么两样了，当然,没有 JavaScript, 述是珂以提交 
表单 T 或仵再利用 HTML 与 CSS 踅些唬人的花招 …… 不过，这只是仵了无 生趣的 
网 UI 上校纵无生命的埯偏而已。其正 U : 网负活起来的交互性，还需赵多一点智《 
与多一点努力……卅保证带来更多报酬„ 


(在线）用户的盅求 
对墙 弹琴… ■■奄无反应 
Ja v aScri pt 在此为您肌务 
m - w , 烤漆、 上 路啰！ 

利用 < scripr > 标签，向浏 E 器表示以下为 JavaScript 
你 的浏览 器可以处评 HTMU CSS 还有 javaSMpi 
人类的虚拟好朋友……滿要你的帮忙 
U：iRock 动起来 
创迚 iRtick 的网贞 
小试身手 

j avaScri pt 的事什 ■ ; Xh R otk 加 iz 回答 
以函数做 alert 
为 j R ock 添加欢迎 信息 
IHRodOtjK 动起来 
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12 

15 
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存储数掸 

每项事物都有自己的位置 

现实生 活中， 我们经常把 “ 有个地方储存物品"送件事看得太 过重要 a 佝 

在 JavaScript 中绝非如此 D 你不佘有个足以藏人的更衣室， 也不会 有可以停放三辆保 
时捷的车库。在 JavaScript 的世界每项事物都有自己的位置，确认众多丰物有所 
依归.则进你的责任。我们讲的亊物就足数掂——包括如何呈现数据、存储数据以 
及找出数据。身为 JavaScript 的存储专家，你将能面对满室杂乱无章的 JavaScript 数 
据. 并用息志为它扪贴上虚拟签 与储藏 编号. 


你的脚本也能存储数据 34 

脚本满_子都垃数据类型 35 

常 i ： 总是相同，变虽钉能有改变 40 

变 S 刚开始没有值 44 

用=初始化变进 45 

常迓拒绝改变 46 

变被 名称屯 卖什么药？ 50 

变:1 /常 ft 名称的合法与违法 51 


变 S 名称通常形似驼峠 


52 


规划 Duncan、Donut M 站 
甜甜圈计算首试 
初始化你的数据……不然就…… 

NaN » 非数字 

加法不 W 能川在数字上 

parseln L() J j parScMrtalO ： 文本转換为数卞 

为何 VT 了多 余的甜甜阖 

发现了甜甜■间谍 
用 getFileTncntFiykIO 柿促表甲■数据 
验证网 页表单的数据 
努力貼近用户綷直 觉輪入 的内容 
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62 
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65 

66 

70 

71 
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77 
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探索窖户端 

浏览器探索 

有时候 T JavaScript 需要知道外在的真实世界如何运作 s 刚开始，你的脚 

氺或.许只垲网页里的代码，侃最后终将存话在浏览器（或称客户端）打造的世界 
里。聪明的脚本通 r 沿要多了解外在的世界， I 能与浏览器沟通，才能 I 加 r 解外 
在如果和浏览器打好关系 t 无论是找出辟楛尺4还足访 h 浏览器的打盹按钮 
(snooze button ) ,脚本能利用的工 Jt - 可多呢！ 




结東 f 


客户端，服务器端， JavaScript S 6 

先问浏览器能为你做什么 M 

iRock 需婴史有反应 ^0 

定时器违榷 f 行动与时间延迟 幻 

拆解定时器 

设定时间- setTimeoutO 94 

再克近一点 t selTimeoutO 函数 95 

多变的屏藜尺寸，永不消失的巾诉 Hi 话 糾 

以 document 对象取得客户端窗 □ 的宽度 100 

以 docuinem 对象的特性设 S 客户端窗口的宽度 101 

设定 iRock 罔像的宽度与离度 K>2 

ikiiclc 应 Si! 合页面阔整大小 103 

浏览器改变大小时触发 om^be 芈汁 107 

onresize 亊件调整了宠物石的大小 108 

我们见过吗？记住用户 〗]0 

每个脚本都有大限 m 

cwjki ^ m 长脚本的生命周則 m 

cookie 记彔名称与数据値……但也可能过期 117 

你的 JavaScript 能活得比网页更长久 H9 

利用 cookie 欢迎 用户 120 

greetUserO^T jTmokie 的神力加持 121 

别忘记设定 cookie 122 

cookie 影响浏览器的安全性 124 

没有 cookie 的世界 126 

与用户沟通……阱了总比没讲奸 129 
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决笫 

前有叉路，面对抉择 

生命中需要太多抉择 B 该悴车或继续开1奶酪或布 T 、 当个污点证人或俯首认罪 
■…-没有下决定的能力，就无法完成任何工作。 hvaScripi 也有相同的状况^—决策 
( decision ) 让脚本在不同结果间作决定。作决定，为你的脚本带来 11 故亊 w ，即使 


是姑世俗的脚本，或多或少都牵涉到故事。我是否佶任用户输人的内容，并为她顸 
订一趙 #找萨斯考奇大脚生物的神秘之旅？还趁应该再检査一下 t 或仵她想预 n 前 
往加孪大萨斯彻溫省的巴士？决定权在你 a 


Welcome fo 

STICK FIGURE 

adventure 



幸运的#赛者，来吧【 

136 

1 如果 w 最真的……就这样做…… 

138 

if 语旬负责评估条件……然后采取行动 

139 

利用 if 二选一 

14] 

你可州 if 作很多选择 

142 
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循环 

自我重复的风险 

有些人说，一点重复是生活中的香料 a 没错，#试新鲜有趣的私物确实很剌激, 
但一点点 m 复真的冇可能完成一天的工作。强迫性地消毒双手1让人神经紧张的嘀 
嗒声，每次收到邮件就按下 61 全部回复"……好吧，或I午现实生活 m 的里复不 a 得 
都是好事》但在 JavaScript 的世界里, " ，点重复” 可能非常便利 4 我们需要脚本 
霣复运行代码的程度很让人惊讶，循环功能因而闪闪发光。没有循环，你将浪费 L 午 


多时间用十剪贴代砰。 
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235 
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&数 

简化、重复利用、回收再利用 

如果 JavaScript 里有整体环境移动的状况，将由函数领头。函数能让你把 

JavaScript 代码变得更冇效率，而且更能里复使用。函数接面向任务的，适用于组 
织代码，也是极佳的问题解决方案。听起来函数的履历表不错嘛！事实上 T 只冇 
锒简单■的脚本才 *i 函数亟组代码的优势无关。虽然很难 U •算每个函数的二緘化碳 
排放 fi ， ⑽.它们总能私&帮助脚本史环保-点 a 
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26S 
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1 复的代码绝非好亊 
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功能与内容分离 

271 

函数只是数据 
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调用或 U 用你的函数 
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丰件 T 回调与 HTML 屈性 
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使用函数引用联结丰件 
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函数字面免抜 乃相助 

279 

眹结何在？ 

280 

以 HTML 网页为外壳 
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表单与验 i 2 
让用户全盘托出 

有了 JavaScrfpU 你不用风度翩翩或鬼鬼祟祟，一样能成功取得用户 

的琯息，但你必须千万小心 a 人类很容易犯错 t 也就是说，在线表单提供的 
数招不见得全都准确或合格。 』 avaScr [ pt 能帮 h — 点忙 D 把输人的表单数据传给 
JavaScript 代码， 坷让网 络应用程序更可靠，也能为服务器减少一些负担 。珍贵 
的带宽应让给霣要事物，例如褙彩的影片或可爱宠物的照片。 



Ban nertK'ity 的 HTM L 衷绝 
当只有 HTML 还不够的时候 
访问表黾数据 
表黾域偕来一连串亊件 
不再是焦点： onblur 
可使用3^^框呈现验证恼息 
确认域 ** 并非无物"的验证 
不使用烦人 alert 框的验证 
更括密的伟无物验证 
尺寸很 里要… … 

验 lit 数据艮度 
骀旺邮政编码 
验证 U 期 

正则表达式一点都不"正规" 
正则 及达式定义用于匹妃的模式 
元字符不只忐示一个字面母宇符 
深入正則表达式：限定符 
利用正则去达式验证数据 
四 K 最少次数与虽多次数 
削除3位数的年份 t 该使用这个 - 
不留 F 任何需贾的改变 
你听到 r 吗？电话号码的验证 
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316 
31S 
319 

321 

322 
326 
329 

或那个 幻1 
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你有一封新邮件：验证电子邮件地址 334 
例外也是规则 335 
从集合中匹配可选字符 3加 
构建邮件地址验证工具 337 
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驾取网页 

利用 DOM 分割 HTML 

利用 JavaScript 控制网页内容其实很像烹饪，只是不用收拾残爨剩肴，但也 

没办法莩受美味的成果 n 不过，你.将能完整访问网豇内的 HTML 构成嬰 Et 要 
的足， 你将拥有替换网贸成分的能力^ JavaScript 让你可以随心所欲地換控网页 
内的 HTML 代码 5 从而打开齐神有趣的机会之门，一切都是因为标准对象： DOM 
(Doc time m Object Model) 的 存在， 



能用但是粗糙简陋……界 fll 很 M 要 ]44 

不使框描述情节 345 

仿问 HTML 元素 347 

与内在的 HTML 建立接触 348 
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操纵 HTML 代码 384 

追溯冒险历稈 387 
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为数棰带来生命 

科学对象怪人 

JavaScript 对象不见得总像医生说的一样阴森可怕但它们拚凑起 

JavaScriptiS 言的林林总总 t 所以它们团结在一起的力设比较太 * 对象结合数据 
与行为 + 以创建一种新的数据 类型， 比起我们到月前为 lh 见过的 K : 他钕据更"活 
灵活现"。你将拿到可以自行排序的数组、可以自我捜索的字符串，迚有会 fe 毛 * 
会在满月肘咆哮的脚本！敁疖一项可能娃我瞎说的，不过你了解我的菡思 T …… 


数据 


v«ar who: 
vdi whdt r 
vat when. - 



xviit 


行为 

f iJEHZtinn rii 5；pl [whet r whete) 
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对象 
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409 
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如果有这么简单，当然谁都想做 a JavaScript 没冇退货保证，但你绝对可以比必 
照你的意思行动。自定义对象> 就馓 JavaScript 版的极热去奶泡不加鲜奶油要三份低 
咖啡因浓缩咖啡的大杯摩 fV 珥奇朵…… 奸 _杯特调咖啡啊！冇了 0定义】对 
%、 你也能布出任你操纵又利川 f 特性和方法优势的代码 - 该后甚至能制造出可承 
复使阳的面向对象程序代码 T 既扩展 f JavaScripl 语言的效率 …… 而 fl 又只为你服 
务! 

屯新杳# YouCube 的 B ] o S 方法 W 

方法过载 451 

类与实例 452 

根据类创建实例 453 

以 ihis 访问实例的恃性 454 

拥有一次，运行多次 t 类拥有的方法 

在类层*使用 prottuyfje 456 

类 t pTutolype 与 YouCube 457 
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签名 fl 传递完毕 465 
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_ _\自定义的 U 期对象=改汉的 VcmCubc 470 

类能有自己的方法 471 
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I —张 LS 胜过千莒万语 475 
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/为 YouCube^ 加图像 打8 

由对象 W .动的 YciuCube 桃) 
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除错务尽 

好脚本也会出错 

即使最佳规划的 JavaScript 蓝图也可能出错„当这种愔形发中_,唭实上一定会 

发％，你的工作就是一别惊慌 u 嬝好的 JavaScript 开发人呙，不是从未造成程序出 
锚的人——这种人叫蹁子 * 琺奸的 javaScHpt 开发人员 . 是能够成功猎捕并消灭自己 
制造的缺陷 ( bu ^) 的人. a 还有，一流的 JavaScript 缺啗终结者也金发展出良奸的编程 
习惯_使最拉诈、敁铋手的缺陷的出现率降到最低。小心驶得万年船。但缺陷如來 
登睨 f , 你将恶耍揾紧 A 动机枪，准备战斗…… 
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动0数揭 

贴心易感的网络应用程序 

当代万维网是个非常有反应的世界，网页被期待着响应读者的每声 呻吟， 

至少 I 午多网站用户和开发者都有这个梦想，透过一个称为 Ajax ——提供戏剧性地 
改变网页■'惑机制的编程忮术， lavaScript 在这个梦想中扮演了里要角色。有了 
Ajax , 网双的行为比较像完全成熟的应用程序 T 因为它们能够 动态地快速下载并存 
储数据以及实时响应用户 T 却不用虽新载人网页或利用浏览器的小手 
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交亙式网络 


i 觉虚拟世界 





不想只把万维网视为被动网页的同义词吗？ 

我们完全 r 解你的心情。被动的信息应该留给“朽搭"这种形式。玲锫适 
介阅谈 I 学习， 迕有很多很多 it 】 途,但 ~ 交互式 -点关系也没有。如果少了 
JavaScript , 万维网就跟书没什么两样了。3然 + 没有 javaScdpt . 还迠叩以 
提交衣单.成许#利用 HTML 与 CSS 耍哼唬人的花祀，…"不过，这只尨在了 
无中趣 的网瓜 上操纵无生命 的隗儡 rfliCU 與正 LL 网豇 活起 来的交 互性. 述 m 
要多一点智 m 与多一点努力 …… m 深证带來 更多报 SL 
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需求很多的用户 


(在线）用户的需求 

5 =知=-维网 （ 刪 是 个虚贿, 仕咖 万维_ 人都是 
真 [ t 的人。域 ㈣ 可咖舰賴娜銭醜 
MeaU ㈣ 下絲 g 細 ■. _錄紐类 ’ 

_针瑜瞭絲賴时 I t 力维 


0 OO 


House Finder 



R«ady to find a new house? 


Enter your annual income: &Q000 


Enter the number of bedrooms: |i 
Enter your ZIP code: 95014 


□one 




右好 J , 睥子有#轻松在 B ± 
妗龙的 A 式输入我的薪本 
和 ilA 录件后+其艳相会*劫 


用户齡入 



第1章 
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交互式两络 


对璁弹琴_ ••… 毫疙反应 

万维网 的响应程度不见得都如想象 I 1 笑好。丰实上，它也有冷淡至极1香 
无 知觉. 完全与外界隔离. 对用户 的需求不理不睬的时候。你以为 输人一 
些数据就会跑出某些响应.…”结 果民然 什么都没有。别以为电脑成网络跟 
你有仇，郞是 因为靜 态万维网的能耐到此为止 U 
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JavaScript 带来交互性 

JavaScript 在此为您服务 

kvaSdpr 的 出现. 使网页浏览一转身变成互动经验。它【上冷冰冰的 
.隹物能％取孜们的甫求、处押_输人数并响应我们敁深 jg 的禺望 

好吧 . 我可能為克过度 1 中，^['过 JfavaStript 可以把问以转变为 

交互式应用裎序 ，完全 +时 f 无牛命的静态网页 ■ 这就是好事 j 





借 * 响应用户的输入数揭， 

JavaScript 为 R 贡带来生命。 


0 OO 


House Finder 


Ready to find a new house? 


m 卢良去桉祛 .迕奴 


4 在用声的 fX 


Enter your annual income: jSOOOO 


Enter the number of bedrooms : 3 


Enter your 2(P code: 95014 


Done ; 


Calculate Price 

click! 


第 i 章 
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HTML, CSiSt JavaScript 


攀 


钢#、烤渎、上路碟 


J-TvaScrtpt [ jHTML, CSS 问为构成网與 ■ 的飞大冗桌。 HTML 像足中 : 
身骨架 ， CSS 是美化 f ] 面的烤漆， JavaScript 则俛轮胎，进 術结构 
(structure, HTML) 、 样式 (style, CSS) ， 行动 (action, JavaScript) 

的路梓，它们同心协力把交互性推行上路. JavaScript 代码与 CSS 相似, 
通常卽 Ul : 梭放4:网 M 屮。 



c^bfiad:- 

<bcrtty> 

<div !<!：=■ fran>e 6 > 

c：dLv Ld-"header->Ready 
y.div Vd: p lcEt *， 

mg stc=-hPtiBe,fing a 

</div> 

<t runn mt^= " 

<dkv cl^sl，<=tyle ty 
<iriput : body S 

fontL 

<div -cMai - 

<input 
</dlV> ' 

«div eldfil afriimj 
tiffiput '、• 

^/div> I ] 

< inpu : 匕 yS 

■■= i nput Ih^de: 

Eoiifia forrt: 

-i/h.Lml> »■ 


isct Lm\ v^iL kdaLfU 扣口 I Vi 3 s 』 n»I 

；/ VfllLdace ttic ZIP ^ch±c= 
f/ if I ! iB2LF J C0cl*«{v.iilU i i?l» S 
jlcrt i -p：;■?；!?:« enca-r 2 IP code 


CSS 违灰 JT 现的 
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达一否卷起 乘辟多 




为何添加」 avaScripl ? 


不晚汽 ffl HTML 月 CSS ttfif 
碉？ 在 JavaScript 出 $ 前， R 
绔 fttB 竝楝好 3 呼 f, 你不 I 也 
*a 唣 7 



HTML 乌 WS 没布風正的 交茧性 

问题庄 fHTMiACSS 没冇的交厅性。<^3_实极供了 IV 多 ifc 窍， 
可于各种 情况下 (例如鼠标移过超链梭时)操纵祥式.似只使用 HTML 
与 css 的沾， K _ 实你会觉得绑芋绑脚，空有满怀壮志却无法施城。 

JavaScript 则几乎能让我们检测■切网奸上的行动 i 例如用户点击按钮、 
调整浏 E 器由 P 大小或在文本域里填人玫据界笄。而月.， JavaScript 垃 
种脚 本语么 (scripting language ) 5 栈们可以肀荇设计响应用广 H 动的 
程序码，闹如执行计算、动态切换网页上的圉像 . 其至还能验证数据 s 


D 



先别对 JavaScript 的细节举白旗投降 . | 
现在还不到那个时候。 j 

虽然 JavaScripl 的能酎+小， fH 我知丨 
逍枰刚掊触它 & \ 


承 # (event) , 咕数 （ function) 1 h &多 JavaScript 之 
谜及时泰上 „ 另外，你呌 能已对 JavaScript. 梢有广解 , 


U 是 fid 不知道尤 1% 


HTML + CSS ♦ JavaScript s 真正的交亙性 
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你对 JavaScript 的了解比你想象的更多。请 看下列 Molise 
Finder * 的 网页， 并在旁边注记各段 J ava5cr f pt 代码 的用途 。狺 
猜若嘛！猎锚又不会少块肉[ 


<head> 

<ti.t le>Hou.se Fi nder-c 
c script type- * text / j aviisc ripL ri > 
tunct ion va 1 idcit eWuFJDer t vaiue J { 

// Validate the number 
if {t iBh'umbar<value]) 
alert f Plesise- enter a number r n ) r 

^-- - - 

/l unc.Lion validateSSPCode \ value ► [ 

f // Validate the 'LIP code 
j if [f iBZIPC ： od6!<value]) 

\ altsrr -1 "Pleasir ： a P cede in the form KXXK 乂， 


EU nf-t I ifin r-P^ 1 产 Pr i 作 r I _ £ _ 里 --- * 

rnaxPtr i ce docuenenr. - get.E] erra^nr. Bv Id I ， i n.c.an\^ u I- . va 1 ue * A ；_^7 
al^rt \" V6U can at rord a house nhat cosr_?. up to S ■- maxPrice + ■ 


Cuncl:ion fip.dHouses(form) i 

yar bedrooms = dacLmveint - gst LlemenLBy E d I ^ bedrooiris - ) -value; 
var zlpC'ods = document.getE1 ement By Id ( H aip^ ) »va lye ? 

f i Display a I ist of matching hoLisus £rOm t ht: si ve»i 
f arm. Bytsnit (\ ； 

> 

script> 
c / head > 


^body> 

<di v ids - Craifl^^s- 

<di,v id-"h&adier* : -Ready to find a new hou bs ?< 

-：div id "left H > 

clnKT src• p liouJiiS. png ■ alt= "Hauas■ /> jr 
<./d Lv> 

c torn 1 ! name= "order form - act ion= h —^fiethcd= rl POST 11 > 
<dii v c]ass= "field">£nLer your >rfnnual incrcfn 公 ？ 

^ - w j n^nmrT f vr>g*=*j^exi_ ta si zt?- B I«° B 
<^^bl ur= n va 1 i dateKiunber (this- value > H 73<r Ad Lv> 
-=div class= * n-gj d.">Entsr the number of bedioocn^ : 
< i rssput id=" berfrofisns" type= h teKt - Bize= H 6^ 
Onbiui H va 1 i tr < t h i s . v r a lue > " ■' >< / di v> 
<div cLasSi B field">Knt.er your code; 

<input id= ■ zip" typ^^^t- pv^ n q 11 ~3n" 
orlblut ^ va.. idar.ftZTPCDde- . valueT^ / ></div> 

-c i r ypp ■' hi^i-rfin ^ valu^ = Pr^rr 8 * 

^fTd [ ck ^" f ： alcPrice ( > ^ m _^?> '' — "" 一 
< input. rype= □「-■ va 1 ue= "Shop tor HCnnS^y 1 

one J t ck= "findHouse^ (thi s, fonri) r H /-■ 

</div-> 

</bo6y> 

■ cyhtiniL > 
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笔上阵 
k 解答 


pt 的 7 解比你想象的史多 ，^ Hous£ 

職又二 Sf 各段一 ㈣ 代码的用“ 


n 


<html> 

<Lhead> 


㈣㈣㈣ ， 5 个 

砬字. 略式如 XKKVA . 


server 


<:body> 

<dlv id= ■ t ramc*" > 

«ii^ Ld^"heddei! p >Heady to i'n\d a ne?w hciLise?^ ： /div> 
-c^fci.v Id-" L-e-Li - 

•i L rryg £： tC ^ M hu M S.y - J^riy! H jd ] T. ~ B Hdu&C;" 

</div> 

<t orm r.anve= "osrderform■ act r rwthad- H L J QS1 !H > 

v d i v class- ■ lie Id' >Ent ej^^Jour j nn，Jd ] i ncom ^： 

I m|i i* i 3 I 11 i rir -iTir^ -^&&= H text" .^lzg= w 12_ 
C^gribIvjr ri vvj ! i c^N-gmher »| ch l - l"iIe'Tj fl >*'><. /d: v ：> 
<:d i v c1oes= ' tie 1 d " > t-n t f 「 f ho n uni-：>iM o I bi^cJ i.ofam 
-■ input Ld= "bedrooms" type = -tc?st h ei ^ 6 *" 
Cfntyk nr - 1 val idaz e^ajnber I tl his . value I * / x /div^ 
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_用 « cript > 标签，向浏览器 
表示认下为 JavaScript 

目前，我们将把 JavaScript 莨接放人 HTML 网页里,正如前页菹例的格 
武。第一件咻.就是让浏览器知道接 F 來不是 HTML ， JavaScript 即 


HTML 的任和了地方郎 4 以安插 ^scr i pt> 标签，但摄好放在网釭 
<head>^^, 如下所 ; j;; 



<ht.ml > 

<head> 

<title>House 


Finder</Lit 1 0 > 


<acri 




道个 ^tipt 杉吾我子， 

龙 T 咸连 砷本褚言 ■■+ … 


text/javaacrlpt^> 


■ 本祕由 __ 
备为 JflUdSclLP^ 


iS p t l-T . 含兑在 " * 
|3_HTWit 间资 f . 


function validateWumber{value) 

// Validate the namber 
if ( ] isfJuiriber (value) J 
alert (" Please enter a niumb-er. 

} 


0 吁起姑身锃屢 如七 杉 爷间的 内容部 
4 JflvaScmf ，，刊 拓择和 4£ 薰把这普 .系 
多 i 5£ TE , ^ II jl^l H . 


u 


</acript> 

</ head > 卜 

〜诘. .4 的 fcii - pt 杉.签象承 i 戏 T 來®灼 
<body> 一股 HTML ； 5 3 

<1 -- All the rest of your HTML --> 
■c/body> 

^ 没有逸岡 W 

- - - Ae 寿癱随 


问： 这么说 来 + 我放在<£0郎1>标 
签中的一切都是 JavaScript 啰？ 

^ :不見得- . c script: > 标 

垦只不过表示接下来是砷本语 
T t 但不一宅会是 JavaScript 。 说 
明 type 的我性， type -" text/ 1 
javascript" 才是对刮先器指定 
采用 JiivjiStript 的部分。 


问；还有其他能用的脚本语肓吗？ 

^ : 当然还有啰！ Microsoft 就拥有 
VBScript (.物本的 Visuat Ba$ic ) 与 
ASP.NET AJAX 等选择 。 我们也将 
于第〗 2 章讨论到一般的 Ajaju 另外 
还有不少能汛的脚本语言，但本书 
只会 .f 吏.柯 text / j avascr i pt* 


f 5 ^ 我的元素一定要在 
HTML 页面的 < head > 区域里吗？ 

答: 好问题 a cscript > 元素 T 
以放 在 ㈣ 页 的任何地方，仅放在 
< hc ad >以外的 S 域都被视为坏习 
饵， 这就跟大家不4■次把 CSS I 在 

H 页中问一样 - -I 奸让 JavaScript 

与内页的其他内客分离、 <head> 
区域正 是个绝 社的地方 3 
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指示浏览器的行动 


你的浏览器玎认处理 HTMU CSS 还布 

JavaScript 

各位 tL 经知遒，洳览器可以栈受并於现 HTML , 各位也 LL 使 mCSS , 让浏 
览器以不同方式美化 HTML 的各个邡分，接 F 来，清把 JavaSenpt 当成另 
种 与浏览器对谈的方式“…佤 JavaScript 并非要求浏览赛呈现某些画面 
(这是 HTML 与 CSS 的1作} + 而足交给浏览跺一^必须通行的命令， 


0 

^ a ： A 酿“.… 



: i O^L , 泮余的员泰 


技 h CSSj^p), 

Jfl " S 如的啤 两详雄■你。 


网站服芳器 


芏的冲 . 容） 
確边5含 ' 
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" 4 ^ 迨有此 

八没有数 




I ' 5 ) r 如何让浏览器运行 JavaScript 
代码？ 

答〗涧 t 器里其有一忡#殊软 
件—— JavaScrip 〖舺释器，它的 
工作就是这行出现在円 M 中的 
JiivuScript 代码：所以你 T 能听过 
别人把 iav ^ Scrtpi 称为解释 语宫， 
与编译语言 柏对。 C ++ 或卽为 
编译语言，需"电编译器 ( compiler ) 
转换6 T 执行的程序丈件， Si 为 
JavaScript 程序的源代鸪可由刘甿 
器枰释，不一定需要编译器的转描 .. 

1®! : 我该如何让网页开始运行 
JavaScript 代码? 

^ ：大多 ft JEWiiScript 代玛 于丹页 
内发生笋件时运 ff T 柯如栽人 H 页， 
或用户点击按妇„ JavaStrijn 有个 
事件” ( event ) 机制， T 以4円虿 
上犮生某个？件时，才牯犮某一段 
JavaScript H 


万维网的安全问题不是很严重 
吗? JavaScript 安全吗? 

^ ； 哽，大故上逐厍安 

ir P Java Script 的基本设 i 十 It 考 
虎到 防止恶意代鹆的问題。例 
如， JavuScripl 不元许读/写用户硬 
盘上的文件，这咱限制巳抹消大部 
分必毒与祁惡代码的生4空间 D 吳 
挥.有限制不干于写出表的网莨没 
有故陷.不会 it 成用户的痛苦，有 
限制， K 表示没办法用 JavaScript 陷 
用户于水深大热中„还有.浏也器 
的漏间加上狡黠的黑客，早就找出 
% JavaScript 安全■性的方式，所以 
它并非绝对 安仝。 

问:那个 … House Finder 网页 
代码里的 <script> 标签……它 
是 HTML 还是」 avaScript B 阿？ 

答 : (scripr > 标签本身是 HTML, 
它的作甩是提供混杂 H TM L 代码 
与 JUvaScript 代码的方式 n 出現 
在 <2[1 ： ]1 口 11 ；■标签 中的逋 代码是 
JavaScript 代码 ■= 这设什 <scrip[>^ 


签时.其实希 望它陡 支持多种脚本 
语言，所以要利用 LYPe 属性指定使 
用 JavaScript 。 

^^ 我看过具有交互性的网页.例 
如检査输入数据是否正确的表单、 
看起来不太像需要 JavaScript 的样 
子 ■: 有可能不利用 JavaScript 吗？ 

:不使 fflJavaSchpi 也能获得円 
奵的交互性，但多半块乏效丰，还 
带来沉玄的 贵担。 以数据的验证为 
例，其实可以在提交表单后占网络 
脱务器处拽，然而.这种方式代表 
要把蝥份表单提交、爭待服务器的 
捡证工作完毕，再把结果作为新 
网页迗铒 ■" ■…你千盹自己子动检查 
表单 It 据还快 一点！ JavaScHpi 的 
交互性定全发生在洞良器里，不需 
軚人新页面， S 而减低7■疚拢在服 
斧器同非必要的来回传送 a 不伩如 
此， JavaScript 提烘的大部分交互蚀 
如果不用 JavaScript 的话，則一窆要 
炫过萇 三方浏忆器附加程序才能达 
成。 



请看丁 叫片断 JmScrip 【代吗，从中分钟出林准 JavaScript 法言、以及 1 fl 
序设计师为 House Finder 网页自 S ： 义的茌 年代码 a 


a lert. 
calc Pries 
zipCode 
var 


JavaScript i 自定义 
JavaScript / _ 定义 
JavaScript / 自定义 
JavaScript i 自定又 


onblur 
oncl ick 
f ir.dt^ou5es 
value 


JavaScript z 1 &定义 
JavaScript I 自定义 
JavaScript / 為定义 
JavaScript f 自定义 


Download at http://www.pin5i.com/ 


目前位罝 ► 13 








习 题解苔 








<head> 

<t-itle>JiouB© Findet:</ti Lle> 
ocript type= " texn/java^o iPC. ■ > 

£unction val ie^Ltin^&r fvalucl 
// Validate the nurnber 
// if {! isNumber (value] 1 
alem «i ^Please e-n^er a number 




/div> 


枝中的 


Custom 


推辛矣 站 S T 破 
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人类的虛拟好朋食…… f 装你的帮仕 


拮束一场成功的 HTML 与 CSS 网也设 i 卜大会后，老板在办公室电召 见你， 

让你看看他的最新在线 发明： iRock. 塊似宠物在玩具业大会已经造成轰动， .. 

但我们的蒯忒坩户 （bet a us«) 却对这只在线宠物不太满怠 e ……^ 

非常明显，用户看到石头，自然想点看看有什么新奇奸玩的反应会出现…… lZ ' 樣本毛法岛使用4备妫 

不过你的老板根本没想到耍有■■反应"这回亊„ 现在， 你得负责 iRock 的交 
互性，这颗石头会升天成为五彩缤纷的仙石，还是会被忑到垃圾桶里.就全 
看你了. 


用卢搞命点击 t 6养的况 fs €- 


MJ &&, 



續怒的制试用卢 
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交互性游玫计划 

ifc iRock 劫起來 

为 iRock 赋予交互性的托务 CL 经交到你的手上，但在违立交互 
性的同时，你也要一起学会 iavaScripU 听起来错，始 JS 
你会变出 一M 能说“哈啰！ p 的可爱宠物石 D 


在本幸接下来的过程中，你将完成下列率项： 


o 

创建 iRock 的 HTML 网页。你 3 铃知 (£ 怎名免 


❹ 

加入一个 JavaScilpt 的 a【ert 棺 t 使 iRock 网页^— j 
完全载入后，宠物石会欢 _ 用户. 1 


❽ 

设计 JavaScript 代码 t 询问用户姓名，并呈 
现个性化的欢迎信息， 述 要让宠物石露出微 
笑& rr …… …^ 

o 

加入一个車件处理器，于用户点击茏物石 
运行我们在第 3 步设计的代码， 

动 n. a 

o 

嬴得老板的赞 S 和莫大的感激。 
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iRocfc 的网页大概是你宥过最简甲.的 HTML 网页了，打开你 
虽爱川的编辑器 T 镟人下列 HTMLfe 签并保存如 
宠物石的纽像可至 He.ati First ldtis 网站 K 载： httpiffwww. 
headjirstlabs . com / booki / k / js / , 


忠 M 芬的 htify 
的帮圮。 


< body > 

<div ： lOOpx^ text-align : center"> 

<img id -'"rocklmg" src- H, rock,png" alt= "iRock" /> 
</aiv> ^ 

</bodY> / rSSSi 




tiifi u 55) iJf ^ 
? [Jffc . f n S a 




Pi ； < div > 标答中的东西是 CSS 吗？ 

答： 没秘 fl 你真内行__ 

我还以为 *XSS 直接放在 HTML 网页中 
是个坏习惯 T 你为什么提供反面教材？ 

哎嚐， 想必你乙熟读 《Head Fir$t HTML 
with CSS 》 了吧? 你说的没婼， it 常最好把 
CSS 放在 < head > 区 H 的 < style > 标！里， 
或以外部袢式表鍺存。不过 t 你的老板其实不 
太熟惠这些規則；方外.也能让系一个范例■闻 
单一点，活说 域来， 如果你想$己设计独土的 
外部袢式表 f 我们绝对举双手嘈成 。 


一 





就从軍件开始 


JavaScript 的事件：为 iRock 加上®答 

想在初次轾入问页时，用 JavaScHpl 欢迎用户，攻们需耍斛决两项宇要的 
JavaScript H 〗 关 H 题：网页何时下载完毕以及如何呈现用户能#到的欢迎方 
式* 

第--项问 M 关系到响应-个车件（本洌为 ㈣ 页的峩人）， 第一 .项 IW 题则与使 
用 JavaScript 的内竄功能——消息提示框 ( akrtbox ) 有关,事件 ( event ) 

. K 实娃 JavaScript 在通知我们"冇些谪得注怠的審愔发生了”，伊 jftnM 贞 
的栽入 ( onload ) 或按钮的点 [li ( onelick ). 你<以|5己设1卜响应亊件 
的 JavaScript 代码- 



18 第1章 


Download at http://www.pin5i.com/ 




交互式网络 



敁 & 数傲 alerf 


JavaScript 的31此是_种弹出式的窗口 (或称对话框 ） ，可对用户呈现信息 4 
想呈现 alert 框，程序代码需调用 JavaScript 的 alert U 函数， R — 并传送准 
备给川户石到的文字。函数 （ fimclion } T 是一段执行常见任务 R 可束踅利用 
的 JavaScript 代码，如芘对话框中呈现怡.包就进个常 SI 的兩数任务 D 


alertQ 


在 JflMScij'pf f 戈碎 f . 只晷着 ！•〕 .)i 相号 
辈尨«其个名仿出 现. .3 常蚝4这數,. 


近最 alert 


n i ^ t 基一个内 S 泛较的名砟 . 用号某 


&印分 4 t 梅中 Jl ) 出 
妗玄车一 


Text to display 


3 个 3 jmASci{|it 

磾给在教的作左-—本釗的玫 S 现 


□ + 

A 1 


分身 f e ) 仿出 ~~ 

行 ^5ctipt 代鷂钓该 
耒.吊平掌萆念 
f 的的句咢。 
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结合前述内容， 一行 完销的 hvaScdpt 代码就这么变出來了。这行猓 
代码将网用苠个函数，并 f den 抿中 i 现欢迎信息； 


W ^ 别被事件摘昏 

轻相头了 ° 

如果你觉伢我们 
刚讲到的 11 亊件*似乎很煞风彔 + 
先别烦恼 t 随若本书的迸行 ，審 
件的全貌也将越发明朗（而 且更 


昆合理 ） s 


凾数，是一段执行 
常见任务 m sr 重复 
利阁的稃序代 鹆。 


欲 I 现的欢设 


戊犮 & (2 












用事件 说哈哆 


为 iRock 渌加欢迕信患 

想问候载入 iRock 网页的用户，我们葙耍添加事件处理器 (eventhandkr , 
或称亊件处理程序） onload , 还要透过 JavaScript 的 alert U 函数列出 
欢迎信息，请把下列这行加人 



<body ooload~ D cil«rt ( 1 Hello, X aon youj? p 眘 t rack - 1 ) ?" 

<div style="margin-top ： lOOpx ； text-align ： center s > 
<img id =" rocklmg" src= ■’ rock ■ png " alL = n iRock H /> 
</div> 

</body> 


靖识 im ^ Scu pi i 
皮相 if 如叼公哎 . 


试玩加上交 S 性的寇物石 


irDck.hlml 


说况 k 现在比较有点交互性了.托 f a 】 ert 框信息的榀（呈现 a | ert 框，乃 
是 onload 丰伴的响应 ） ，请用你的浏览器打开卷否有什 
么节情发生： 
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㈣ ：’事件 b 从何处来？ M :还有其他类似 alert () 的内 S 函 

答 t 件是由用户发 t 但数吗？ 

最终还是来合測見器„就像 “桉 ^ : 当然，桕1有很多呢！ 
[莱个）鍵 " ，它是令杖用户勒发的 a 1 erE ： (} 只是一个 JavaScript , 内 If 
事件，但刹見器必蜎包装关于事件的可重1利用代码的例子。这趟 
的信息（例如#个键被按下） s 再 JavaScript 的旅程上，我们还会谈到很 
传递给 S 责响应11个亊件的為敷。 多标承 { 内置） _子各位看完本 

I 事件如果没有相应的源代 t t 你甚至还可_定义疏州 
会发生汗么？^马？ 问；为什么 iRock 的 onload 代码 

答；如釆杏无人如的贫林中有姝 k 要混用单双引号？ 

树倒了、你会听釗它阑地的声嘀吗？ ^ ： HTML 与 JavaScripi 都需要我们 
亨件也 是如此 a 如果没有关 于萝怦 先标示一段文字的结束、才能开始 
的岣应. 制見 B 陡会自己做自匕的 下一段……除非使用不肉的分界字 
事 t 没有人听得到事件发生的信号.符 ( delimiter , 如单.双引兮 ） 4 所 
换句话说,不论 onl oad 是否有相 以说，遇到 J jivaSeripi 出现在 HTML 
关响应，都与网页的栽入浞有关系 D 爲性内的_[#芄时 （文 宇中1有史 

字） T 我们只好渡.合单.双引号的使 
用，以四避标示丈字结束的问題__ 
无论■你时 HTML 尾性与 JiivUiScripi 
文字各采用何忡分界字符，一叉选 
好了，就要从一吒终> 或许夹际举 
个例子比皎清楚 -—— iRock 的用法 


f 7 件以 JavaScript ^ 
玛哙应内 K 置犮 i 的 

动錚口 


八完毕后駐发 a 


■ 函权把 JavaScript 打包 
力 T 重复利用的糢塽„ 


： 你不是说 JavaScript 代码应该 
放在 < script > 标签里吗？ 

^ :的确如此。不过它们也能直 
接放在事件处 II 器中 T _如€倒的 
onload 事件。 还有，眘你只需要运 
行一行 JavaScript 代码时，像 iRock 
这种直接嶔入 HTML 的才之比较间 
单。 


_ alert <) 是个 JavaScript 
内罝為 数 ， A 责在洋出 
的对诺柜中: L 现文字佶 


清把每 R JavaScript 代蚂与它的功用连起来 


于弹出的对 t 舌框中呈现文字洁息 


指出网页已经完成载人 


阐起传给涵数的信息 





加上一点个性化 



请杞吾段 JavaScript 代码与它的功用迻起来. 


onload 



alert 


于弹出的对话 框中 M 现文字掊息 
表示一行 JavaScript 代码的终结 
指 出网贞己经完 成栽人 
阐起抟给 1#1 数的信息 


i£ iRock 庹正动起来 


在设计交1:性 iRwk 的任妗上，你 t ! ■经 有些小逬展了，不过， 
想盘 这么点东西赢取用户的欢心……你还 记得那 呰待办亊项 
叫？ 


网页 完 生载大后，宠物 石会欢迎 

用户， 

设计 JavaScript 代码，询问用户姓名，并呈 
现个性化的欢迎信息 + 还要让 宠物石 露出微 
笑。 

加入一个 事件处理器 .于用户点击宠物石时, 
运行我们在第3步设计的代码」 


&珀也挺宄5 j 


© 贏得老板的赞赏和莫大的感激。 
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交亙性是种双尚沟遍 

到 B 前为止，我们的宠物石会打招呼，但用户没办法 N 答什么 D 其灾, 
我们希空宠物石能响应户的行为。利用■点 JavaSdpt 的小帮忙，改 
兖 iKwfc 的表惝，并在欢迎信患屮加人用户的昵称……它軚能变成作常活 
跃乂犮善，让人爱小释 T 1 的宠物石。 




tRpcfc 也在技 表规作銻 
P } 角户 撖筅。 




f/ 用卢的涑金度 

/ 4 找基我 (0 的 


戒羊 C 嘴 

„ 


JavaScript 让用户能与 iRoclt 互动，把键盘输人 (key press) 与鼠标 
点 ili (mouse cIkk) 诸般 .1( 件 ， 转换成宠物石与 4 〔人间的轻松往来 0 
由 JavaScript 加温的虚拟友谊诞主 H 
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麽笔上阵解答 


⑽答 


请猜請看咕攻見标点击”亨件的 JavaScript 必&名称, 

oncWck 


jo . 笔用户4铋两向 Si 魚丧故 
杉 -, 就含触岌训搴件^ _ ® 
个玛否钿作均句有考 I 的故在 代踢。 


渌加取得闲户名字的凾数 

JavaScript 函数己经烹调完年准备上桌-铴次春到 ' JavaScript 卜.菜”的阐示, 
表示各位 R 要-字不漏地照抄这部分代码就好了，请相信我们，你很快就会 
学到关千这些程序码的 一切 ，而艮连 B 己写确 数都能上芋. 

卜 _ 列程序代码是一个命名为 tuuC h ROCjt () 的 Cl 定义■涵数 n 用 ' P ■敦促用户输人 
名字，接若利用 alert 框列出个性化的欢迎记息 e 这个涵数也会把图愾改成微 
笑的石头 & 为 iRock 加上个性化功能的方式就这么简申, 


prsmpiO 费责制 if % 殊出芘 o , 

t "Enter your name here. 14 ) ? 

-- t (uff<rNaHi F ) { % t K 

lf (userName) { ^ 相利 0 个伐化栌 d 往伟总 _ .■… 

alert (" It is good to meet you, h + user Name 十 ". 11 ); 

document. getElementBy id ( f, rocklmg’ 1 ) ■ sre = 11 i-ock_happy«png * : 

} …… S _) s：s ©淳 菜赖威坻复的 

S 供我! 

I- ^ Ct)c 0«5 - 

你知道这个轟数应该放在 irock . html 的哪个 
位1噂？ 
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凡！ JdLflSstipi A ft ■部 
薄 d [« ie ()— 祥奄个 名坊， 

function touchKock{) t 

var userName = prompt ( 11 what is your neime? 
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JavaScript 冰箱磁铁 

mock 网页的垛始程序少了几段关键代码。你能帮这个网页填 

入失落的片段吗？ ~ , 

现苏: 不站安.备 f 喝？龙你的 


/ 


<htm,l> 

<head> 

ctitle>iRDck - The Virtual Pet Rock</title> 

-- 

< type= m text / j avascript 11 > 

^ j. j j. _ a. . fad _ j. b .b _ s. 4 b 

fynction touchRock()( 

var userWaiBG = prompt ( ^Vih^t is your name?" F 

"Enter your name here. n ); 

if {userName) ( 

alert{'It is good to meet you, " + uaerHame + H r")? fe 

doci 」 i?‘ent 」 getElQrriGntByld [ •■rocicimg ' 11 ) . stc - " rocK happy r png n : | 

) K 

) 

</script> 

</head> 


<body =“ { 

) ? n > 

edi v Etyle="^rgin top: lOOpx ; text .align :ceri 匕 

<irr；g id= - rockImg* src = ■ rock.png H alt= H iRock" 

.=" /> 

</div> 

<ybody> 

</htinl> 

■■> 

style- H cursor ： pointer " 1 


touctutoekn 






1 Hallo f I am your pat rock-’ 




i onelick I 

11 


目前位置 ► 
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JavaScript 冰箱磁铁解答 



ri 


忘 兴承 ® 的 f 4 A . 

值 tPucftdoffcO 忐盘子 -t 在 H ： 

嚷时受蚪碑用 a 


沾故杆移 ilffi 劣 i 方吋. 
碴 £ 试锫宪锌婷 4 掌 4 J fl 
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ifcock 网页的原始程序少了几段关键代码 * 你能帮这个网页填 
入失落的片段吗？ 


I £ {userNamel 1 { 

alert ( 11 It is good to meet you, " + userName + 
document.getElementByld(^rocklmg").src = "rock 

} 


_happy. 

N 


png 


</script> 

</he^d> 


揮系网 S 岛 aUu 概 


把吞® 敁光 垅笑的石社 


<body 

<di 


I onload~k-"| alert _ 'Hallo, I *ffl your pet rock . 1 _ 


& 數 fS 子辞殊 
的 <sw P *>^¥f, Ci 个耔荃 
又钕子网 ® 的 <^d> 3 , 


<html> j _ 

<head> / 

<CitlesdRock - The Visual P 台 t Roc ： k</title> 


fj acr ipt p ： ypg= +l text/javascript 

touchRock () { 

var userName = prompt E"What is your name?"^ H Enter your name here.")? 


子分鸦 fi 用的脚本请 t , 本剜 


src= " rock . png" aliRocki" $tyle=’cursor ; pointer 11 

^ cki ) I " /> 


</body> 
</html> 
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xig id= n rocklmg" src 
"cursor:point 


ft good ^ mMt you, Pawl. 

OH- ^ 


目前位置 


Whiil: is your ruamm? 


P^ui 


Cancal^) ^ • Qj{ 


即时 重燔：剮才崖生？仔么事？ 

— 点点 JavaScript 就引发 J" 许多改变.塑造出亲切可爱的全新 
iRock . 我们一起来回顾一 Fm 冇改变 . 以及它们影响网页的方式。 


*©e 


ondicki 




良去的象, 

发 （3 宅义的 JaDiSciifiC 基发 u 


function touctiRock(} { 

vsr user Name = prompt { w wbat is your nar^e?" f 

"Enter your name here ,"；； 

iE (userName) { 

alert (" it is good to meet you, ■ + userNctme + ".")； 
document r geLElemeniC. Byld t "r ocklmj' ) .-ere = ""rock_happy,png ' 

) 


在數碑间 M . 卢的名专 
樣筠 名字制 5 个性化的 
玟设 ns J & 。 


果本的 a : ■怿 


Download at http://www.pin5i.com/ 






iRock 动起来啦 [ 


试莰 iRock 10 

大家务必 6 制丨 rock ■ ht ml 考 26 SO , 并 B 得到 Head First 
Labs ( httpiiiwww,bcadfirstlah.cam/books/bjjs/) F 我石又图 fgr 然后，打 
开浏览器，试玩一 F 你的 宠物石 吧！ 



o 

❺ 

o 

o 


令 J 建 i n io ck 的 HTML 网页， 

入 一 1 JtJVdCSuiiJt 的 aleri 框， ^ iRock _ . 一一一 
网贵免全载 入后， 宠物石会欢迎用 户 c 


JavaScript 为网 

页加上 行动能力 ， 
不再隈子煮 "¥ 7 免 


，设计 JavaSof 中 t 代 咏 询问用户姓名，并 女一 埘爸 故事。 

呈进个性 化的欢迎信 gL 还要让 宠物有 IT ■ ^笑 



O 惠得老板的赞赏和莫大的感激。 


老捉走人琢漢 * ……任 
的磷 dM ■扣的方公言& 
5铽夺择匍嘁： 
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JavaScript 填字游戏 

少下来 Lh 你的左脑也运动一下^下面是个典型的填字游戏, 
所冇解答的 ㈤ 汇都矜在本帘出现过 B 



横向提示 

2. 有段 K 码为 IRack 捩供个性化 si ; 迎信,么，它的名砟 

是 _ __ 

4.想嘀应鼠标点击的动作时，只需在 HTML 组件 
的_ 属性置设 X — 姿 JavaScript 代码， 

苦缺少这样特色，你干脆只用 HTML 与 CSS 就好 


纵向提示 

K — 重复利用，执行常见任务的 JavaScripL 代码 
称为 _ a 

3 .有 _发生 T 而剐見器希塱让我们知道 

5- "The led good online toy of the season ," 
ft ._ 让我们 知道 M 页乙栽人完毕 fl 


8 .想对 用户里 现一段文字 t 清调用_毐数 a 
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JavaScript 填字游戏解答 


JavaScript 填字游戏酹答 
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Page Bender 


请垂 S 对折本页.模拟左 
右脑的区分，井解决我们 


提出的谜团. 



JavaScript ^ 免 AR 菸淥加？什幺东35? 


ii £! 右每的 命宠金设！ 务 





不笆是哪种石头，都渴望着某件相同事情! 


这世上有冷硬无 
情的石头…… 


……也有温暖贴心 
的石头 g 


onclick! 



上 R 搜索，犬概也找不到 
兵子这个问越的好答索。 

你应该在 ffl 户身上茌 点时阅 。 

所有网页 4 P 会想知迤 
兩户的意见。 
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存储数提 




% 


每项事物都有自己的位置 



现实生活中，我们经常把 " 有个地方储存物品”这件事看得太过重要 。但 

在 JavaScript 中绝作如此你不会冇个足 LU 藏人的更衣室，也不会有可以停放三辆 
保时徒的彩库。在 hvaScript 的世界 每 项事物都有自己的位 S , 确认众-多串 
物有所依！ JIL 则足你的贵任，我们讲的率物就是数据一^栝如何呈现数据、存 
储数据以及找出数据，身为 JavaScripl 的存储专家，你将能哳村满室杂乱无欲的 
JavaScHp 〖数据，并用意志为它们贴 . h 虚拟标签与储藏编号， 


进入新章节 


Download at http://www.pin5i.com/ 







负贵数据存擷的脚本 


你的瞄本也能#储数椐 

几妒所有_本都会面对数据，通常是把数据存储于存储器里1住在网 
络浏览器里的 JavaScript 解样器，它负贵淸出一点存储 JavaScript 数据 
的空间。不过，你要负责指出欲存储的数据，还有欲使用教据的方式。 


f 部 a % 沒黄# t ： 十鼉 的邱本 f a 


使用存储起柬的数据，脚本才能继续计算，并记忆用户的数据。 
如果没冇存储数据的能力，我们永远也找不到合适的房屋,也无 
法深人认 IR iRotk 。 



想想日常生活中有喁些每天都在处理的锫皂。这 
爷信 息相似吗？有很大的差异马？你会怎么组织各 
种不同的佶息呢？ 
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存储数据 



/^ ，打开洗 ㈣ 机 i r ON3 J 


Number 

数字 （ ntirnbcr ) ⑴卜 
物品数坫等数值数据。 
的数字可能坫韨数 （ 2 
汴点数公斤） 。 


又； ( text ) 数据只是一串 l 
如你最愛的咖啡品牌名称。 
常赴电一词汇或略的句子. 
然如此字符串 ( girj ^ g ) 拉 
称呼文丰类的数椐，在 J 咖 S 
文本数据常出现在双引号（， 
单引号 O 中„ 


数据类翌直接彰喃 』 avaScript 代码里处理数据的方式。举例来 
说， alert 框只能呈现文本，无法列出数字 q 所以数字将陏中转换 
为文本 * rfif 后才出现在我 们面前 ■> 





请从图中找出能以 JavaScr 彳 pt 数裾类型表示的事物，并注 
明它们所属的类型。 
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存储数据 



1204 


M 办费費系 

9 
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磨笔上阵解答 




谪从 图中找出能以 JavaScript 数据类型表矛的事物.并注 
明它们所厲的类型+ 


Object (诗锜讀见 
JE9 牵 ) 




Tejft 
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刍相同对上不同 

常量总是相简 t 交 量可能 有改变 

在 JavaScHpt 电存储数据不只耍注寇类型 t 述# 注意数 据的用途，你 
会如何使用数惘？说得吏仔细点 + 在脚+执行的过程中，数据会改 
变吗？你 的回答 将决定数据类犁应设定为变釐 ( vjinphle ) 述足常里 
( co ^ tant ) ,在脚本的执行过程中，变量会改变，常纪的值则永不改 
变。 


变量数棰可认改 
变——常蛋数掐 
則是©定的。 


f 畺 

齑妗的 ] SO 万平方冓 

掌| (取0仿敍 
•:去 h ) 幻蝻板 J 央板崞 ■) B 



変 t 

钤三 C 人 O -— i $ . © 

i 6 M ® 的人 o 的 节汴滅 



明费的 URL 的 

■rfjtnc jM j ： ^onaC9 , cflHi - ^ 

f . 软补这#滤甜® / S 突 



-— t i , - fi ^ 知用 
卢窃 I 择#此否 ，因布 
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存储教据 
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存储数据 



今晚 主题： 变董与常璗在数据存储领域 
的竞争， 


变蠆： 常墨 ： 

讲 到存储数据，我提供 T 最大的沒活性，你針以 
陆盘修改我的值。我可能现在是一 个值， 梢后又 

变成 W —个值一这就是我所谓的自山啊！ 我看是 “垴头草, 两边倒”吧！照我的哀;思，应 

该从一而终，就是坚决的 ••致 性才使得我如此珍 
贵……脚本设计_很热愛数据在过程中的测 
性呢 a 

垃坫是……不过在数据必须与时并进的状况下， 

你那颗不 知变通 的水泥躺袋完仝不适用嘛！像足 
火箭升空前要从十开始倒数，你来处理 看看啊 ！ 

哟，你的寇思是说 R 有 ” t n 才是存储关键数据 
的选择哕？大错特锚！你以为火箭要怎么运 . h 发 
射台？那是因为有个聪明人 It 得把发射日期设为 
常眭。给我一个与时汴迸的截止3 期， 我就给你 
- Kbm 定行程慢一拍的项 B D 

好啦！随 便啦！ 怎么有人能如此得意洋洋地把变 
沣 性视为邾恶呢？你不知追呜？改变也可能是好 
事，尤其是必须存槠用户输人的数据 1 执行 H 算 
的时候 a 

宰物越常 改变. 也越常维抟不变。说真的，一开 
始为什么耍有改变？选择对的值 ， 然后就不紫:动 
它 f 。 你想想，无论莕 意与否 . 足个湞永 W 不会 
改变，知逍有 这么 ㈣ 节+是很舒杨岬？ 




我钤我们 M 惫彼此间岐见很深就好 G 


事实上_我从头到 J 1 都跟你怠 SI 不合 u 
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建立变通 


耷 f 剐孖飽浚布值 


变觉， 是存储器里附有浊一无二名称 （unique name) 的存储位 S 
(storage location) T 就眼我们为储藏箱貼 h 标签一样 ^ 创建变 fi , 清使 


用 JavaScript 的特別关键字 var, 并为新变 Sc 命名。关键宇 （ keyword ) 是 
在 JavaScripr 中设焚为负责特殊任务 ( 创 建变 i 即为其中之一 ) 的词汇 9 


tai 吴链穹乔出 ii f 
i 在把 遘觭的定 ■■ 


v r 一 ■■■ c m.. 


iA ¥* a . pt 代级的 


voliable name 



ZD 



\ 


名#九子 

访包用的宇铧.只尊在 一 
伶典本中不 f S 相:闽 S # 
料 n 


当你以 var 关键字创建变盈财 T 变迂刚开始是空的……没有值。变 
魅刚开始赴空的，没冇关系，只费你在指派值给变设前別试#读取 
变呈。下载 MP 3 到播放器的，别试若播放音乐1 


是的 』 am 

^ts : . 



var pageHits ; 






-1 冬其 

$_ page Hi i s 1 ,. 



刚创建的变惫都有（程序）拨出的保留空 N , 也准备好存储数 
掘 u 存取与操纵变埯存储数据的关键在千其名称。所以每个变敁均 
有“独特且有意义的变逢名称 w 才会这么重要 * 例如 T pageHita 
就是个提示企 M 存储内容的好名称。若把页面浏览次数命名为 X 或 


ttb — 
备鏟房苺 





gerkin , 描述性_沒然无仔。 
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用 e 扣飽 化耷量 

创建变玦时其实已经可以加上初始诮。 If 实上1创建一个 
有初始值的变; S : 是种好习惯6这种行力称做"变陡初始化 
initialising ) H t 而且只要在一般创建变 S 的代码 it 稍微加点 

东两即可" 一 B 代砝的 



*咢 (=) 邊孩3变 ■* 名 扣姑 乓伸 

枒和它的初磘值。 5定署 I 。 


经过初姶化的变法立刻就能投人战场，不像其他空落战的伙伴 
……变里 m 已经存储/值，就像买 r 台预裁 mp 3 的咅东播放 


器一玷上躭能播放音乐。 


时走量痄采 
—个 : 



U 得数据类锢鸣？ 这- 行脚本还自动把数据类型指派烚变珐。本例 
中， JavaScT 中 t 以数宇类坠创速了 populationist 因为我们指泥 
给变设的初姶依是个数值，300,如果变欧听后被桁派了: R : 他光型, 
变虽戈 钯则会颗应新数据 而改变 a JavaS ^ ripl 多 •卜 内动处理这个 H 题, 


但 ii 是有些状况访要 0 ci 动 T 处理，甚至动手转换为不冏数据类型 


m 我们耍晚一点 I 会遇到这种状况。 
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常量 很固执 


常 1 炬絕改变 


初始化一个变 y ： K 是设定它的第一个 值一一 不会阻±事后发生 
变化 B 如果治要存储不会改变的 数据， 则需要常 珐的协 助。 常鼠 的创迮 
方式与初始化变 M —样，但改用关键 Teemst . 而非 vai 此时的 11 初 


始”值变成“永久 ™ 値 


常 H : 拿到手的东西,別想叫它放幵！ 






I const % 


Constant name 




□ 



有些浏览器 
不支持关键 

法意 j 字 const 。 

const 关健字最近才扣 
人 JavaSchpi , 有些浏 I 器 

还不支持它，在发 布使唞 
const : 的 JavaScript 代科 
前，清务必应用在常用蜩 
見器上多加检查。 


Constant va 


□ 


常董-3 个佬未 

不 s £4 3 


本埘砵来 


创建常3与创捃 变设间 的嵌大不同.跣在 T - 使用的关键字——常味用 
const , 变货用 var D 常钍的诘法与变货的初始化枏同-+过，常 ft 习 
惯以全都是大写卞母的方式命名，作为与变钍的区嗝。 



常呈利 T_ 存储铝要写死在代 码取的 数据，例如昔业税肀。 ~ 其&抟使圯 
钕字 CU 925, 改用具有叙述性名称的常敁，如 TEXRATE , 反而让你的代 
码史容 M 理解 u 而且，如果常缺诮耑要改变.你只葙动手修改一个地 
方 定义常 M 的地方，而+用在脚本里_ -行行 地寻找要改的伉，逐一 
4找玎能会把車态变得很复 杂。 
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R 前的温度> 刚开始并不知逍 

从人类 U ■兑年-龄的力_式 M 变成狗年龄的方式（人的一年 T 十狗的7年) 
火箭发射的倒数 iW (从10到 0) 

美味甜甜捆的价钱 （50 美分} 


常虽的确不能改变，至少要打开文本编辑器才能 
修改。 


正在运行脚本时.常珐确实不能改变……但我们没办法阻 
止你找到创建常觉的地方，然后修改它的懷。所以说，从 
脚本的观点来孴，常说绝对是阐定的，但从你的观点來费, 


只要回到创法常^的地方，就能改变它的值。本运 u 
时,税率常置不能改变，但我们可以在滬代码屮修改税串, 
此巧的脚本运行结果則均以新税丰为根也^ 


请判断 f 列信蛊 应为常贽或变魅，然后写出创建它们的 tmiH - a 初始化（如果需要 
初始化的状况）。 


Download at http://www.pin5i.com/ 


















习题解答 





谞判断下列信息应为常置或变 s + 然后笃出创逑它们的代码并予以初姶化（如果需要 
初始化的状况） fl 



目前的溫度,刚开始并不知道 


V 

轉 

o 


从人类计箅年龄的办式转变成狗 H •算年龄的方式（人的一年等丁-狗的7年) 
火箭发射的倒数计时(从10到 0) 

美味甜甜固的价钱 （50 美分） 


wMtmp : 

V 


!4 飪紂鉬夺企仪 -- 
不扣道成存的递改 . 
空下来 。 


未戎刑 IA 


co^ist mumom - 1 



萃於 的踔硪 比剜不含挺立 
I 含理的选终 a 


宋 f 基 


y ^ m ^ mnr . XQL . .. . . .. . . .. . 

唞漱幵的 u 狒以 下呀的 1 .贪複 
4 拔甚 1 1 ■ 冻£ If 任占技知姑 
亿功科祐斛教叻教 0 ⑽， 



var donutPripe s 0 - 50 ; or const PONUTPRICE ^ 0 . 50 ; 


祐魂浓的价格叼袪玫 i H A 

H ^6 M m 依的 4 f 比校合 
IF # 




. ■■… fg 知采沾 iiti 粟的价格戌.法不定 ■ 
d 的 铪用本 奢存噠价格比蚊碎 .. 
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~有蠢问极 


问：如果我不指定 JavaScript 数据 
的类型 + 它要怎么知道数据的类型？ 

^ : hivaScript 不是邵神能够明 
碕指定 （ tf 或常类芏的程 
序请 _ 1 \说定』21 1 ^5(；「41数据的值 
时、即乙自动晴示类璧。这种设计 
为 JavaScript 变量带表非常大的灵 
活性、因为它们的教掂类免能隨着 
不蚵的指派值而转变。泰例■来说 t 
杞数字丨7指痕给变童：<时，它的类 
型現是&字 （ number ) 。但知菜你 
转变心恚，改为指系 “ sijaeerT 给 

x , 这个变量类屯則|]动转换为字 
符中 - 

问-既然 JavaScript 会自动处理 
数据类型，为什么我还耍学习类型 
的相关内容羽？ 

答:因为这世上有很多无法依 
相 JavaScript 自动处述类■^的 
状見 4 假设有个叕字存试为文表 
( tut ) 类宝，但你突然想把 这个鈦 
字用于数学运算，这时就需要把文 
本转祛为数芋类玺，如果是相反方 
向的拎换.例如在 a ] ert 挹里列出軚 
字，啟视类型也同样要先转換为文 


本 c JavaSt ： ripi 将 ㉚ 动执行故值一 
丈芋的#换，但转捵结果可能跟你 
的讳期有点盖异 4 

如果我真的不知道变里的可能 
值，可以放着它，不做初始化吗？ 

^ i 当然没叼题 n 初始化背后的 
杈念，在于避免存 a 还没有存人值 
的变量 u 不过，总是会有不如道值 
却需要钊建变爹的状也。此时，清 
在使用变责前，先确定是否已设定 
定曼值， 还有， 变堂也 t 以用“什 
么邡没有"当成初始值，， 
(丈本> , 0 {数 字 }、 folse (^ 
体）等等：如此设定有助于減低不 
小心存取未初始化突责 的风 险,. 

P 5 ) 有什么分辨变罡与常 M 使用时 
机的決窍吗？ 

^:虽然我 V 以蜗单回答 K 常量不 
会改变 t 但变 f 会改变”，可其实 
不只这样。我们经 f 先把所有糸氏 
备成 H 后来才•後慢转换其中一 
部分为常即使如此、把变 f 砖 
捩为常量岵情形还是很少£的，反 
而常常 花时间 修正常用的文本或数 
字，例如欢迎信忽或特接比例 a 


与其让这类文本戈数字的副本涛布 
于代玛中，应该把它们创建成常黄 
并改网常責。釦杲以后还要修改这 
类值，就只需絛改一个地方了 3 

■ 重新载入网页时，脚本的数 
据怎么办？ 

答 I 此时軚掂重新设为初始值，回 
到.料束尚未执行前的状态 。换句话 
说 t 重新我入网页，与笔一次执行 
R 页脚本的故菜相同 = 

数椐类型在 
设 g 変堡値 
乌常量值的 
同时建立。 


复习要点 

■ 啣本通常能卩乂下列二种基本数据类兜表示：文本 
( iejtt ) ^ 数宇 （ rvumber ) ,布尔 （boolean > a 

m 变 M 足 || 了能在脚本执行 ii 稈屮改窀的数拖\ 

■ 常璽是不会改变的数据 t 


■ 关键字 V3r 用 f 创建变最,关铟宇 const 用干创迮 

常 flu 

■ JavaScript 数据的啦据类型在设定数据为特定诮的 hi 
时逑立-另外，变设值的类型可以改变， 
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变陡、常 t 及 jt 他 JavaScript 语法疋桌在脚本里均 靠独一 尤二的名称分 
辨. 这种名称也叫做标识符 ( identifier ) n JavaScript 的标识符就像我 
们每个 人都拥有的姓名，识比姓名缺乏4活性（孜们可能和别人 M 名 
闷姓，的变设不能冇这种怙形） u 除了在脚+中的唯一性 
( unique ) t 标识符尚露承受几项 JavaScript 发布的命名法则 : j 


第一个字符后可接字 I 、下划线 （ J 、美元符 
号 （$) 或教字 { number ) 。 


空格与特殊字符（下划线和美先符号除外）不可 
出现在标识符罡， 


法犯纪的纤瘃仗。 


为变设威常 ® :创违 JavaScript 标 tU 符你 K ■实怂4为-段炕息命名, 
这段信息通常在脚本中有其意义 ( meaning ) a 所以.只是通守标识 
符命名法則还不够，你还应该尽&为数据片段的名称赋 P 情堍意涵, 
i h 其他人就能坍 LH 名 称的总义， 


标轵符 ( S 異有猻逑性，才能轻易辨 
识数梅， E 别提还有含法性索要考 








变畺 / 常 董名称 的含法鸟违法 


存储数据 



firetName 


toplOO 


述法，不守 W 发拿 
起碲 u 




ka _ chow 


合:去-激弯牵出迓今右掌 



含 f HS , 
下刊线， vl^ 
句 JI 


眾钯以其玷鞞眛窜得 
栏碑. 


topSecret 


$total 


H 以下到4起碚.茁食 
沒 右问欲 —— 甚至充 人 H 用 
@砝技巧.光鲜锞金义的迮 
爭命名 


含法虽轉卷眭來免 
传，作 K . 第无捋名起珀灾 

■tn 








DuncaiA Uanms 的駐店小精灵正在熬夜赶軔宣传埼上的标语。可是，它们不.知 道有 
些设计违反 T hvaScH | Jl 对于标识符命名的规定，请在 JavaScript 不接 受的喟 子名称 


上®叉 
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习題 I ? 答 





DuncaTTs Donuts 的牡店小精足正在热夜赶制室传帽上的标浯，可是，它们不知道有 
哇设计违及 T JavaSufipf 对于标 iX 符命名的规定 . ^请在 JavaScript 不44受的阳子名.称 
上函 又6 



杉 C 身€竹龙 f 不 T 伎 拖也不杉漣用空 ft 甚只金嫡起 f ^ 

t 格 的悻皂 ■> 


変 1 名称逯常形 f 味驼碡 


虽然没冇 fl 纸黑 卞指定 javaSdpt 标识符的外形风格，彳 H.j av;1 Smpt 社 K 有些不 
成文规定 8 其中一项，就是使用驼嵘型 (Came(Case) , &就 itkSfetH 符山 
多个字词组成时，甽以大小 U 敁合的形式组成（再次提醒，变 U 名称不可使 
用空格 ）• 变&通常使用小写鸵峰造窀，也就是第- -个词 汇全都小写+但后 
续的 wr 则混合大小: 


imm 


cake _ donuts 


以 TjHN (蓓項钐识苻皋用的众 
$<€(ZM 来违规, fss ^ €^? 
的素式.> 


S 个#的單一个 
> 字邊采用 丈萆： 

WumCaJceDoiiut^ - 


场 ■> -电 J ……此 f 单式 A 
你鈐跎碲轚 f 戊泛不 4 
&孖的 i #幸名方式。 


小筠驼碡型用子构成多个 
字询姐成的変 盪名称 。 


till 

W 


啥3 • ^个邮 . 
茧个佴的个 
$遂柹力 t 另的 C 


iCakeDonuta 


杖足这作 



0® 乾峰 f 最 


(i 合角吁 J 个荨钾铂蜮栌变 
§ % , 
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阐 

□ 


JavaScript 冰箱磁锒 

DtmoarTs Donuts 的标识符磁铁，与它们对应的变置或常■:分敢7。镝把毎个变量/ 
常置与正确的磁铁联结起来，并确定它们的名称都符合 JavaScr 彳 pt 的 规定。加分： 



今夭卖4的扣蝽 

數翟（极） 


获得本月之 | 


泡茂夹4■犬 B 


訾矛系统的拔态 


制批甜鉗® 
Mf 的®紛 I 


用子沩建葙兵倉 
税额的 鸶让税 
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JavaScript 冰箱礤铁蘚答 

& uncan ? s Donuts 的标识符磁铁 + 与它们对应的变量或常量分敢 
T . 请把每个变 */ 常通与正确的磁铁联结起来，并确定它们的名 
称 郢符合 Ja 扣 Script 的规定 # 加分： 标出数锯类型。 





Humber 


今天龚出的+蜡 
數妥（⑹ 


衮珥本月之 f 
的秃 J 韙名 


fejtf 


employ eeOf Month 


洛芨夹•犬抒 


螫矛系统的蚨4 


和 —批鉑谢® 
Mf 的®扮署 

J _ Floii Rpbrbatck Til 

用号 決定高 S 含 f 
稅顧的 营公稅 I 

^ I 

C^Ki 


WutHter 


N^niher 


利 7 的 JAvaSdiipl 接棟 > 
杆:&迮规名邙 。 


cupe-o-coffee 


Employee of the Mcmth 


eclairRECOHDHOL 


ilarnq _ status 


aclairwiune^ 


! p e * 0 f*the' 


Tax# 


flour quantity 
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(甜甜谬市埙）头彔新闻 

你 或1 午听过 Duncan’s Donuu 但你应该没见过 Duncan 本人，也没 
听过他对甜甜囿市场的惊天计划, Duncan 想把“热甜甜阍 (Hot 
DounU )" 的市场带入 T 个层次……带人网络世界!他想做即时 
甜甜罔 f ，客 户透过网络 f nr 箏并瑜人指定的取货时 nitt , 时 
| Vi ]1 .=ij f f 客户就能免到热帏陴的腓甜阁 n 你的工作就是确认用户 
输入必廉数据，同时还要计算税额与订购总额. 




OD'OiOD 



PurK^n'fl 4u»t-ln-Tlm6 DonUti 

At » c*ftr *och. rv 


* P l 補從用户的 









JavaScript 的甜甜圈 订 购表单 

规划 Puncan’s PoMut 闷站 

处埋叩时的甜甜圈汀绝._ ，■ 

霜数据的汀构表单以及相批*一 （戒 称验证） t 包括所 
■均 糊 :紙小 计与 

t。 >lacc °^ r " 按酬于也 r 歧綠，':购总颔的响 
玫任■■ ■■，暂时先不考虑这个问题。 一' H ' 込+纪 J avaS Cf ip^j 




YUS 


mee 


Duncan's Just-In-Time Donuts 


Duncan's Just-In-Time Donuts 

All donuts 50 cents &Bch t csks or gloiBdf 



Name: 
# of cake dorruts: 


# of glazed donuts: 
Minutes ^ pickup: 


Dev nt 



Subtotal: 

Tax: 

Total: 


Paut 
0 
12 
AS 


S 6*00^ 


5 0. 5 5 

56.55 


d 曲 （lit 由 
砟.时 

tO 、 



J … 5 «七不爾 t * 龙的 
in * 聋给筠培榷熹器钤 

衫作 • 
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小计 ( subtotal ) 为甜甜围数#乘上单价 t 


( # of eal«0 donuts + # of glasod ftonuts ) k 



price p«r donut 




税额 ( tax ) 则是小 计乘上 税傘: 

subtotal x tax rate 





订单总额则是小计加上税额 ; 

$ubtot 钃 I + tax 


的 U 笮 Mi 奵不 少锘贤 追踪的数据。他不只忠要保存用户输 
人的汗多数据.还要把数据交给 JavaScript 代码 Lh 兗， 



.擦 3 谕访妨 - 

上述计算需要奶 些变童 或常 I ?你会怎么 
命名？ 
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不会 it 算 


甜甜圈 i 十箕酋试 


―咖试如己动毛设收 ㈣ 

:后. 

结果居然；！ $_，也不蝴 代表什 二 L 「 n 鱗 

糊槪 用咖‘ 的 


S 0 0 urtC ； 4 rt - i JuSt - lfl-TirtH CXmutl 

Duncan's Just-ln-Tlme Donuts 

Ak donuts 50 cants eoch r caka or glazed! 



Name ； |p^ul 
ff at cake dorvjEs: (o - 


# of gilazftd dantH&: 


Minul« n tri pickup: M5 


Subtolsl. [SNaN ^ 


TajL SNaN 


Total: SNaN 


Done 


P<»a<f OnJgr * 



SNaN . 右代表 



:：， L “祕， s/ ' tm ' 賊触 ㈣ ■ 
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<head> 

<L iLl&>DunG£uis J, Just-fn-Time [K>nyts^/tit 

<link 工 el=’stylesheet" = * tf=Kt/css - href 3 - donut /> 

< script java script-> 

""if ur&Ct iori updateOrder () *f 
const TAXRATE; 

- ^ const DONurPRiCE ； 

var cViiUfKZak&DonLLl: t; = docuinent. .get Elerr.ent:l5y Ed ( # cake<ionuts 4,1 ) „va Inej 
var numGl a sed Don uls ~ doc ument .g&t E n L By I d {g L a z e ddcmu t # J. v^l ue ； 
var aybTot al = ^nu me a k e Don ut s +■ n u md 1 a 2 edDonu L a) * DONUTF^ICE? 
var tax = subTota l * TAKRATE? 
va.r tQt-91 = g-ybTotal + ta>C ； 

doc u.me nt _ get: E1 eir.ent By Id (* 5 u bt on a 1 w | B va. lue = * su bTot al-toFi xcd<2) 

doc unnenr. .getEl ement By Id (* t a x 』 K va lye = 争 tax.t oPi xed (2) j 

dpcuTnent ， getELem 匀 ntBy 工 di*toir.a l_) lue = ^ +- tota 1.toFixed(2 ^； 
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磨笔上阵解萏 



笔上解阵答 


请问 s 你觉得 Duncan's 的即时甜甜濁脚本有哪些地方出 

II 了？ 


t t TAXRATt 去 OONUTP^Ci 冉禾刼娉 fC , © 的构矣辨 J? 先注完咸 * 

，！■，，， F_P ， P f r 1 P1R1 FIFI TIB ， P I P I P II ■ 1 B ■ ■ r ■ ■■_, ■ I ■ I. ■ r ■ ■■ 矚 ■ ■ ■■疆 tilllil hBld b J b d b d J b d & J li d Si a m m m m m ^ ~ m p ^ ^ 


GO 



第 2m 



你不该做出 未初始化 的常量。 

如果+指■定常 M 偯 t ，然会有未初姶化的常里，彳 ti 这 
种情况非常植糕， 植糕到 极点。若未 T _ 创建常 S 时初 
始化，常 蛩将无 所适从——没有值，而乩述没办法 
指定它的值未初始化的常&趿终成为编码错误 . M 
然浏览器通常不认 m 这个错误， 
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存捕数据 


扣飽化你的数 «• ••…不然轼…… 

如果览段数椐扑来初始化 t 就称为未定义的 {undefined ) —— 
的毕如形容匁式，这可不是说它没冇价恨，只是 表示其 屮 
没冇信息…… W 时没苻。当你式着使用未初始化的变量或常董时, 
叫题就出現 h 


const 


未初蛣化 


DONUTPRICE; 


j 


t hi 会 <t 


var 

var 

var 



nuinGiciz edDonuts 


Sn^Scupt^A * 表子乘 

■: i 





严重？ ■■++_■ 


常砧 DOKUTPtUCE 未初始化 t 表示它没有值，丰实上 T JavaScript 个 
持殊的，专 fl 推迷 01 没有值”状态的值； undefined , 有点像你打 
开答朵机时听到"没 有怊言 n 的信患——技术 I _. 而 w 没有留言" 
也适一_ 留吾' 但它的存在却是为了告知 11 没有留 言 ”， undefined 
的用途也 一样. 它是为； T 告知#没有数据# ^ 


一段数梅如果 
琪有邋 ，轼是 


o 





DONUTPRICE 
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此 NaN ■非彼 naan 


NaM , 非数字 

一如 undefined 代表一种特殊的数据状态 T JavaScript 还有一个根重要 
的位，用千表达变 软的特 殊状 况： NaN ， 非数 f (Not a Number ) t \\ i ] 
例中，囚为佶息不够，无法计算. sutoTotal 遂被设为灿换句话说, 
某个应该是数字的值不见时，就会出现 NaN 。 

、 / 

subtotal - (0 + 12) * T = KaN 

既铒送个敖賴吞禾左义4丹戈七 
法録该 T 去,, 

所以，解决 Na N 的问题，諶要在创迮常 U DOKU T P RIC E 的 M 时初姶 

ft : 

const DOWUTPHXCB = 0,50; 


NaN 是个 
字的值, 

mtmi tac 

为它会是个 
数字。 



一份脚本中的标识符必须独一 
无二，这是什么意思？ 

“标识符”原本就是用于辦识 
御本中的某段信息 3 在真实生活中， 
你我 -° r 柜拥有 相蚵的姓名……但人 
矣有办法处埋“同名同姓"的问题， 
分辨出是你或是我 。 JavaScript 
元法面对这种樸梭两可+所以需要 
我们小心地使用不: ㈣ 的 名称来分辫 
5同的信息，想达成这一点、就要 
确认脚本里的标识符都不一样 n 

:我创建的所有标识符都必须独 
一无二吗？还是一份脚本里的标识符 
都有独特性就好了？ 

^ : 标诅符的独特性只需在单一一 
份御本里达成；有时甚至只要在，脚 
本的头个部分有独特性就彤了^不 


过，最好记得 H 络应 JfMi 序的脚禾 
可能变得非常庞大 t M 跨多个文忤。 
在这种情况下，确保 j 个标识符的 
独特性就変成一钟挑战了。幸好， 
在自乙的脚木中纽持标识符 的性村 
性不算太困难，只赉在命名时 
尽责具有描述性。 

我还昆不太 1 驼峰型与小写驼 
峰型的使用时机^有什么差别吗？ 

驼峰觉（首字母也大写丨只会 
用于对象，第9章将详細说明。小写 
驼峰空刎用于定 f 和毐数，它与肥 
峰 W / L 乎一# h 只不过差别在于首 
字母小写，所以，驼峰堂表示我们 
可能把对象命名为 Uonut , 而把必 
数命名幻 geLDonuUh 把史 玄命名 
为 niji cnDonut . £ 1 ^,常量的名称則没有 
这辱史化，全都大写祀对 r E 


:文本与布尔类型的数据会被视 
为 NaN 吗？ 

^ :埋论上，是的，四勾它们决 
非数字 1 但在实际上，并#如此 .. 

N a N 的设计 3 的，在于表示并砟 
我们频期的数字軚相 ^ 换句诺说 , 
NaK 并非 . 一般的 JavaScript 数据描 
述方式 h 它是跃字 II 据类型 有误时 
的指标，通常只在计算过程中需要 
軚字 + 却收到咔啟值的数据时 ， t 
会看釗 NaN n 
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存储数据 


现在， © 头讨论 Pimcaw 的问超 

四头 i 寸论 Duncan’s Donut, 杯态敁变越梏 B 原本是 送出空 的甜甜 
圈 t 现在变成制出过多 甜甜豳—— 每份 tr 箄的数进都计贷得 
过多 Duncan 一直收到 甜甜圈 送得太多和 jtiE 填充得太多的抱 
怨„ 
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不同类型的加法 


加法不 H 能用在数字上 

JavaScript 里， 上下文 ( context ) 就是一切。不只在:使用数 
据做事 （ doing ) 时茧要 T 上下文村千我们在代码电操纵何种 
(what kind ) 数据尤適 H 就连 ** 两段信息的加法"这么简 
中-的丰情，部可能凼 A 数据的类型而产生非常+同的结果。 


2 


3 


数字相加 

两十数字的加法一一产牛-两值 
应 R] 笛数加法后的结渠.一眼 
你想的一样。 


" + ,r nut e ^ - w donut b 


r^iAAr P +, ^ k . -在 —起一 的在 

子符串相连 崎峽 

两个字符串的加法也会产生各位 
戍许 意料 到的结果、彳4 4算数的 
加法非常不一样—宇符串将首 
尾相连 （ end - fo - cTid ) s 


MiJ 才说到字符串的加法与数字的不一样 T 如染把两个 
文本类取的数卞应用加法呢？会发生 什么变 化？ 


^V 1 + fr 2 # =■ ? 金 ■& 啷一#耷 

休？ 


JavaScript 对于字符屮电的内容并不在总一-它。对 
JavaScript 而5都垃字符 # 因此，字符串内容 M 为数卞.但 
对十“宇符串相连 " 的规则并无影响——如见你的本意是 
想做算数加法 + 此时的结果或许有点出 乎意料 & 


+ ,, 2 a - w 12 w 

\/ 

呒贫达们苻率 S 打教穿， 
妖含啵用 ■'穿 得事 ftiT ， 的松 
时 鍁加法 „ 


铒蓽也碜 . ！么系部不 



应用加法前，谓 
确认相加的数 
据是你想象中的 
数据 


在试围相加教字时*叶做 
7字符串相连，是种常见的 
JavaSeript 错误 t 如果也倣数字 
相加 T 诸确定先把字符 f 转换 
为故字了，再皮阳加法 3 
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parselntO S parseFloatO ： 

文本转换为数字 

虽然有枳加/相 连的问 题，但对于应用择数运算至存储成宁符 H 4 
的数字 t 其实有正统的解决 方法。 这种时候，我们需要先把字符 
中转換 ( convert ) 为数字，再应用任何算数运算 . Jav ^ ript ^ 
供两个便利的转换函数， 



把字符申传给函数，函数就把 把卞打串 f 专给函数，凼数就把字符串转換 

字符串转换为整数 为（十 进位} 浮点数 


这两个内置函数邰梭受字符丰，丼在转换后返回 数字: 


pa^se ，0挹 T 转旅的 f 。 



Z 


+ parsej^6;('2” = : 

. N 

子符宰 2 轉釉泠軚字 t. 


^ — 汝的 铁某 ♦狄 
甚『和$的¥敷扣沽 



请太家 Ui 得： par^e-Int 0 parReFloatn 函数不保 
证转換一定成功，我们传给函敎的仿息决定它们的运作 
是否成功。函数会尽-切能力，把字符串转換为数字, 
何我们应该只提供 ** 只包含数宇”的字符串。 


0 



如果这里的函 
数还是让你觉 
轻松得困惑，先别 


担心。 


pareeFloatr $31,50") 
/ 

ii 硖 代鸪* 个闷鉍 ， 

轉螞使基艎级淹， 


= «aN 

沒备、 浼善 .走拽熹 j 


i 稍后，我们会槌到关于轟數的内 
i 幕一-现在，你只去■知道在数能 
! 让我们 传入信息 + 而后返回某姿东 
!西就够了 6 
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当相加失效的时候 


为何汀 J 多余的甜掰搔 

进一步査看即时甜甜阁的订购表单。我们应该能找出意外 if 
r 这么多甜甜■的原因…… 


&ee 


Duncanjust - ln-Time Donuts 


CD 


Duncan's Just-In-Time Donuts 

AH donuts 50 cents each , cake or gfazed ! 



Kame : (Creg 


# of cake donuts: [i" 
# of glazad donuts: E5" 
Minutes 'til pickup: 




S^btg]^jS31.SQ^ 


Tax : 


Tolal : | S 34.41 


Place Qfdcf [ 


Done 


把 + 计金额除以甜甜周单价……签粜就是意外 u _ 
购的甜 甜周数 


小 4 舍极 



$31*50 / $0.50 

/ 

S 个裙时®的辈价 



donut s 



噁. ■…. 


m i 


怎么# 都像是数字字符也相连的问题，允 K - 在想到表单数椐总是存储 
成卞符串后 （尤论 实除内容为何>。虽然 a 们输人表单域的数据是数 
字*徂从 JavaScHpt 呑来，它们只娃字符 s 所以我们盖耍把丰符串转 
换为正牌的数字，以免 JavaScript 误把数字相加当成丰符串相连。 


这 ® 專嗶？ 
3 和阌鸿况 
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罨起來漁 f 盔生 
. 不基喝? 


Download at http://www.pin5i.com/ 
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存储数据 



笔上阵 


使用下列代码片段，抓出填入甜甜_数釐的表单域的内容，为 
Duncan 的 updat : eOrder {) 补完；见的程序代码.让甜甜昭数 
屋从宇符串转换为数宇， 


docu jmenc , get El ementByld { ^ ca kedonuts ), value 

个部分用户诠 

个拥分 saff 用户 入的 ## 你甜 

松入的承衩钳妨® 


document.get ElementByld{-glazeddonutsn.value 




function updaE;eOrder() { 

const TAXRATE = 0.092 5; 
const DONUTPRICE = O.hOj 
var numCakeDonuts - 


var numG1a 2 edDonuts = 


if U sNaNfnumCakeDonuts}) 
numCakeDonut 3 = 0 ； 
if {i sNaN(numGlazedDcmuts)) 
numGlazedDonut 5 - 0 ； 

var subTotal = (immCakeDonuts + rmmGlasedDonuts) * DONUTPRICE; 
var tax = subTotal * taxrate? 
var total - subTotal + tax? 

document .get EiemeritByld( w subtotal* 1, ) .value = w subTotal .toFixed{2 )； 

document .get ElementByldf"tax'*) .value = " + tax.toFixed(2]; 

document .get ElementById(otal 1 ") .value = # + total. toFixed^2}; 
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磨笔上阵解答 



使用下列代码片段，抓出填入甜甜围数置的表单域的内容< 为 
Ouncan ^ updateOrderO 补完不见的程序代码*让甜甜圈数 
置从字符单转换为数宇。 


document .get Element Byld (^glaseddoruits 


function updateOrder() { 

const TAX RATE = 0,0925 
const DONUTPRICE = CL 5 
var numCakeDonuts = 


var numG1a z e dD onu c s 


if (i sNa J>] (numC akeDonuts)) 
n^mCakeDonuts - 0; 
if (isNaN(n\imGlazedDonuts)) 
numGla 2 edlCJcinuts ■= 0 ； 

var subTotal 二 {numCakeDonuta + numGlaKedDortuts) 士 DONUTPRICE^ 
var tsx 二 subTotal * TAXRATEj 
var total - subTotal 十 tax ； 

document igetElamentKv 弓 lue = $ w * EiubTotS 1 f tOFi xrc! [ 2 ); 

document .get Element By Id ("tax" ) .value = w $ a + tax.t oFixed(2 )； 
document .getElementByld("total"■) .value - ^ + total.toFixed(2> ： 
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存储麩据 


复习要点 一——- 

m 虽楗 JavaScnpl 丼太严 格地要常 M 名你采用全部 
太写 （ UPPERCASE ) ， 变 ffl 名称采用小写驼蜂型 
( lowerCamclCaac ) 娃种良好的编程习惯。 

_ 创洼常 ft 时必定予以初始化，只势畤能，珉好也做 
变 ft 初始化， 


■ 变陡来初始化时.它将维待在未定义的 ( unde ¬ 
fined ) 状态.直到我们指販任何疽过去， 

_ NaN 代丧示非戤字 T 也用干指出某段数据不是数宇 
(当它期待中应该是数乍 时）。 

m 宇符串相连与 W 数的加法非常不同， M 然都使川加 
^ (+) n 


你找出？问娌…… 

Duncan #到你修复 JavaScript 程序代码的手法，大感佩服。他终 T 收 
到椿准的订迆 …… 生意也蒸蒸 R 上了！ ^ 



ftHIA ~ ^ 

• oretodgemw 
MmulMTfpsj 邮 ■奸 
^4.10 
T ** - pOL4? 


苎然，假设儿个小修正就能永远解决所有问题,实在太 H 险亊 
实上，最麻烦的问题，冇时候会丙意料外的外在力 W 而 W . 现…… 
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坏事再临 


PuncaM 崖现 J 甜甜谲闽渫 


到了新的问题 ： 贿的 ■者，^-⑽喊在職 
经营热_，现在开始据供早麵务、雌 stH y _在干 

了杜抓祕雌舰贿手边多 
r 没冇客户的 rr 单——太 楢糕了 e 




»ee 


DuKMiJusMn- 


因为这 ㈣ 跡 川单， du _ 浪费了宝躺时 i 褚力与甜甜 I 
他祀耍你補:确认所有表 祕娜 已瑜人，才止 ㈣ l 通过 d ’ 


Place Ord_f . 


* 蟬沒有蹌入 s 卢 


Duncans JLiftt-IrwTima Danuts 

AM etomls 50 cmi£ oach r cako or giazodi 


#<yf cakfli donuls： [iS 
# erf glared ctonuts:; [io — 
pkicup. |l 5 
Subtotal . \%2^00 


Tas-pl? 


T 咖: \$2^22 


Namei[ 


CntM 
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存储数据 


闽 gctEIemewt ^ yWn 滅捉表单数梅 

为厂检查表肀数据是否合法 ( validity ) + 你甫要用于袖捉网 UT 数据的方 
以 hwSoript 取得网页允索的关键，就是 HTML 柿签里的 icl ^ 性。 


: input type = w text w i w ca kedonut s* name = "cakedonuts" /> 义 


^ 嫌性抚恚 hviSctipt 代拉 


JavaScript 允许我们利用 get Element Byrd U 函数以 
m 访 ㈦ 网页元桌。这个函数不会直孩補捉元志的数 
据， 而足以 JavaScript 对象的形式提供 HTML 蝻内奔^ 
我们 則透 过域的 vaUiR 性质 （ property ) 访叫数据* 


document .getsl ejnentByldU 

■ 

把网页 上敁个无素的⑴传给这个函 
数， 它:就 会把元粜本穿 交给你，疋紊 
則呌用 干访问 叫 沉上的 数据。 

S, 

的攀. 


访 入 3 轶忒 * 昀 •* 
的 HTML ^ # „ 


# of cakfi don-uts: jl-S 


杖技木系 " S * . 州 Eiir 州 ffjaS W () 
4 个吟 象矍的意 [去 



先别对着对象 I 性质，方法等名 
词哭天抢地， 

JavaScript ，支持一种先进的数据类 

型-对象 ( object ) 能达成一马非 

常酷的工怍。丰实上，锫个 hvaS [: ript 语 言就是 一堆对 
t 本 •书 稍后将进一步 I 寸论对象——现在.各位只要 
先知道“方法”很像函数，“性质”很像变 RU 


docu man L .get Ele ment Byld( w cake donuts 


documenli. get Element By Idpcakedonuts 11 } >v^lue — —♦ 

# or caiut dor^yte- jlS ■_ m 


1 肩 ii 残！ H 祆巧 



JD 塞 <S 必无 ft 的 
參 -铋. 


有了这段程序代码，你已经准备好检迕 Duncan 的表单数据，以确保 
接受汀畝响每个表¥-域都有数据1\ 
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每项内容都填入了吗？ 


验证 R 贡表单的数提 


你盍耍确认甜甜图订单上是否输入 r 客户姓名。未输人取货时间 + 
可能也是个问题，毕竟服务 Li 的在于即时提供热聘鸭的甜甜圈 n 所 




该收到询问姓忠的要域也应采用相同处理，不过或许应该 
进-，步检査该域的数据垲否为数字，内霞函数 isNaMU 使这项检査成 
真一把值传给这个病数 t 然后它4能击诉你两种 状况： L 值不是数 
字 ( true ) 2.值是数卞 { false ) , 


如粟 fi 是个交 
字霣華 ■ 我 n 
妹冇闷胺 j . 


Mlnulea T* ptckup ： (iTftrtn 


一 _是个盘字. 





空字 符串， 是域里 
浚布数描的线索。 


isMTaN(document .getElementByld^ "pickupnioutes^ ) .value )； 


mNaNOai 认值 4 
否婷麝 AS , 



心 I 检电？ 婷 t , B< , 表孕激 
t 面此不巧诗讀 


true 
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P 


JavaScript 冰葙磁铗 

我们用 plaeeorderf ) 函数睑证姓名与取货时间 s 使用以下提供的 
冰箱磁铁 + 完成检查姓名与取货时间数捃是否存在的程序代码，还耍 
舰取货賴辟純字 # 你簡 要每个纖，健職甚至不只使 

m I 


用一次 


~ ir 用予梏 明条 埤式. 

( it ) 这轉 


a 岑子&? 


茶个务件次一苟戗道 线某种 H 
处——如菜达样 mn , 
則鬼某砷辜 


Eui-ict Ion pl.aceOrder 0 { 


aler 1:(^1^m sorry but you must provide your nanne before submitting an order. w j ； 
else if { = - 


alertt"I J J lI sorry btiL you must provide the number of minutes until p 丄 ck-up w +■ 
^betore gubiriitcing an order , fi }； 

else 

H Submit the order to the server 
form.submit ()； 


Pickupi&inutes 




IhH ft 




document I 




^aluei 


getElem&ntByld 
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JavaScript 冰箱磁铁解答 




JavaScript 冰箱礤铥鞟答 

我6用 placeOrderO 函数验证姓名与取货时间 □ 使用以下提供的 

冰箱磁铁，完成检奇讨名与取货时间数据是否存在的程序代码，还要 

确认取觸 M 额鮮，肺㈣每个職 T W 些職妓不只使 
用一次。 



么 f 柃电 
碚砧4孟 


f U 


ction placeOrderf)[ 

牵 dOGument + gi 


t: f * 1 1 !ll 5 T5fTT^ ou must pro 

before submitcing an order」**} 
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你播教 J Puhcsin's PonuP 


冲 j ifuneansmut . 再一次 f 

（附_騎） + 终 结了^ _的歸 
謝 H 魏更碑柳既以如伽 ip ,_ 户输人数^ 
integrity 是|双籯机制，尤其适用子竞争激烈的雜布场电哦丨丨 


存储数据 


#00 



_ Pwr«nUut^rvDrii»Pqntf U 

Duncan"* Just-loTImfi Donuts 

AH donuts SO conis each, voh^Oc j/h£9<fl 

cske dansffli ： jlft 

» cf glued donuts : [ io - 

〆 Mim/MA n a ^Ickti 

Sut^l: |124.00 
X Tax: |i? 23 " 


TgUli ； m^-22 


Piaet Ordii 1 



朱哝战名嘁.现 
1 存埒 a 发资苷梅 

fl 卑逆行 u 


II 放章衆馮的吁取 
货 d 问的蛾不44 

问典* 



5 abm ^ T 4^ n ^[^ 5 ^ 咖咖卿「細邮 




Fir s(Mry but inou must provide the number of minutes 
uiHil prck-up before submitting an order. 
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问吧……我知进你很想问 


有蠹问 ft 


1 $:加号 （+) 怎么 知遵该 做相连 
或相加？ 

答■:就像 JavaScript f ■的许 多 
亨项 * 戽数的功耜需由上下文 
( context ) 决定 。 这表示加今看了 
要相和的东西后.才根据 v 軚据类 
决定该做 k 值加法或字 符申相 
连，你匕经知道两个字句相加衣 
示 11 首毛相连 " D 扭问題可能发生 
在数掘类5!很你的嘏设不一样的时 
候。 所以 t 最好 在鼓值 加法前，先 
确认提供的运算对象本是数宇，也 
确认字符串相连前都是提供 丈本。 

如果试着做字符串与数字相 
加，会发生什么事？ 

答 1 固为 JavaScript 会&动把啟 

字4#成宇符_嗔 . 沒合这两种类 

曳的相加 操怍. 必定追成字符串相 
连。所以说、数字 t 转接成宇符 
争，系统再串连两个字 符爭。 如果 
你原米想做玟字加法. S 彳需使用 
parrselncU 或 parseFloal ： .U ， 把 
字苻 串转换 为数字。 

问：如果使用 parselnt () 转換包 

含浮点数的字符串，会发生什么事？ 

^ ： 别想太多，砟的程序代码不会 
因此失事》 vaScripl 只会假设你 
不、在意小啟点后的部分， 阁 此仅返 
W 小牧点前的整数部分 fl 

问; HTML 的 id 属性究竞如何联系 
网页 元素与 JavaScript 代码？ 

答； 诂可以把 i d 属性当成一个 
人 o , JavaScript 代碑利用这个 


人口访问 HTML 的内容。当别人 
说到 J a v a S c r t p t 代码能在网上 
运作时，其实并非真的厶说内页 
本身——他 ff ] 是指 消 Z 器 。 实际 
上< JavaScripl 代碼与 HTML 代码 
不怎么熟，必堝透过非常特殊的机 
制才能访 FI , 其中之一就是 需要 id 
属 _ f 4 ,该属性能 ■ ii JavaScrips 访问 
HTML 的元素 s 为円页元素加上 
附有 ID 的标荃， JavaSerip 【忾码即 
可找到该心彖，打开许多脚本编码 
(scripting) 的可能性， 



向 ■. 你讲得还真抽象* JavaScript 
代码到底如何访问 HTML 元素？ 请讲 
细节 n 

: 这令嘛 - dd ) C ： UJrient 对篆的 
get ElementByldU 方法，就是从 

JavaScript 访 MHTML 元素的关健 l 

这个方法則使用 id 属性来寻找网 
瓦上的茱令元素， HTML 的 ID 就 

來 Jav ; iStr 〖 pt 的择识符-在某一 

个 H 页上， m 或标仅符均应往一无 
二,蒼則 ， get Element B^IdU iy 
法将不知该返 ㈤ 哪个元素， 

I 句：你说过我们会到第& 章再谈 
对象，但对象己经出现过好几次了！ 
它们是什么玩意？ 


答5你这是偷跑呶！小声点，别 
让其他人听见了 5 对象是钟 t 进 
的 JavaScript 数相类垡，它能这合 
函数、常量与为一个迻辑实体 
(logical entity ). 方法 ( method ) 
其实是龙于茱对象的某数.特性 
( property ) 别是对象里的常董或 
定: i "。 在实现层面上 ， JavaScript 
几乎使 ffl 对象表达一切^ —浏 t 
器窗 a 是个对象、网页丈件也是令 
对象- 所以 getElementByldn 方 
法必靖邊过 do c um e nt . 对象 矛能调 
用——因为它是茱个表示焚体网页 
的对象里的一部分。好了好了，赶 
铁回来第2幸…… 

=我还是不明白网页元索和元素 
值的不同 6 到底有什么不同？ 

答： H 页元素对 JavaScript 而言 
是种对象，也就是说，我们可以透 
过神性与方法樣纵月页元素 3 这！ 
对象都有个 value 特性 t 它保存了 
鍺藏在元素里的值，韧如，表单域 
的 value , 就是输人该域的数据。 

^=为什么縳要检査值是否 
数字？检查是否“为”数字，不是 
更合理吗？ 

好冋題 a 遠根究底，这个问题 
其实在 t 检查值是否为敫字。大多 
钍假设状况下， 诈在处 理敎字，所 
以检砉例卟状况比较合理，错由检 
查 MaW , 你用 f 处理敎字的脚本会 
更可贵，希望也能减少计算非敖字 
的坯异情况 a 
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存储数据 


努力贴近用户靠蛊觉输入的沟窖 

观在 h Duncan 不再遇 . t 紧急状况，他 E 的很恕改#即时甜甜阁表申-的用户体 
验, 就像“热 甜甜降 r 的招牌 t 路过他 店门口 的行人看到这个招牌就会产生直贷 
影响， Duncan 也希望在线太申.能拥有扣似的直促彩响 n i ^ n ^ n 知道■般人軎欢 
以 U 4 T 为承位 U ^ T 也以相问雄位极供很少有人会 U 】2或24个甜甜阐，他们 
会 U ^打 " 或 "2 打”甜甜圈 E 他觉衍钳甜阁衣申的 I 了购華位也该 S 然一点。 

H 题仵 h R 前的脚冬并未考虑输人 VowiT -切的状况、程泮并不 知遵这 个硐是 
种单位 a 


©O0 


jyat-ln 


^ ^^ patse ^ tQ ^ 
^ I -3 doxe 
与麝字 3 




Duncd^s Just-ln-Ttm© Donuts 

M donuts 50 cents eec 沈 cake or giax^dl 

Nb 嘛 | Dierd « 

#gf Mke donuts : [3 dozen 
#dl giazed donuts :( 

LI 邮 .til piCJOJp： 


rati 


HM 


parselntO dozen) 


脚+不会抱怨州户在同一个域 1 H 输人 r M doicn lt 和数字 
— parselntn ft 接忽视卞符串里 ft : 何出现迮数卞后的文 + B 所 
以， " duztn " 就这样被茇#厂只柯数 r 保存 rF 来。 




它 4 尨穹夂 



3 



沈 I 沈 I 昉 


我们的鉗鉗阍脚本 是苍能 允件用户榆入 啟宇、 或输入 饪字与 
呢？该怎么做？ 


1 如江 rT (以 * 打"为订昀单位） 
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parselntt^lS^ > 
ilt 公綸入的盘辛 # I 

1 个教、 \ 


t»OM<UI7S 






s 


f u.net ion p 丑 srseDonut sidoriiit 丄 rig} I. 

numDonuts = parseTnt (donutSLr ing) 

if (donutiString.indeJtOf ( p dozert rt ) 

numDonuts ’= lh 
return rifUinDonuts ； \ 


解析甜甜圈的数量 

p 肛 seD_tsU 頃数被 updaneOrderU 涵数调用，也 M 働":川厂输人 
的数据算出小1+金颇与总额的时候 h 


function updateOrder(} t J 
Const TAXRATE = 0.092^? >/ 

const DONUT PH ICE = Q.50; ^ 

var numCakeDonutc = parseDom 」 ns(documerit ..goLEIementHyldt^caked onu ) ..value) ? 
var riumG-asedDonut^ = parseDomus(document ^getElesnentByldt""glazeddonut 5 11 >-value) 
if (i (numCak eDon yes)) 

numCa k e Don u t s = Oi 
if (i W (nuF：G 1 a z od Donu t s \ 

numG1azedDonuts - 0 ； ( 

Vt3,r subToLal = (nuinCakeDonuts + nurnGlaxedDonuLs) * DONaTPRICE; 
var tax = 叫 bfTotial * TAXRATEA £ 出 .H4 舍砷.戍 I? (t^) 皂呆幵 .. 

var total - subTotai + tax; J ^ 

document.get EilemeritBvTcM ^ sybtotai # ) r vaiu.e = + ^ utrrot ^ l . toFixed {2) 

do c u men t - g o t E1 ement By Id {t a x 1,1 ) .value = ^ $ 11 + t ax.toFixed(2} x 
doc u meni, get E me n l By I d t" lo t a 1 ^ ), value = jr $ ,T + total a toFi xed(2h_ 


& ■基 & 入片昶妨 (p 教 § 不々铨言 







热力四射钳钳圈 j 


即时甜甜®荻得空前成场 f 


帥的即 时热甜甜阁构恕， 
盼 tiE 用广输人数据的网豇 了觯， 


完全被 一个由 JavaS „ ipT 驱动，小心 
生括真是太顺利了！ 



^ Q O Duncan's iutt-ln-Tlm« Donuts 

Duncan's Just-In-Time Donuts 

All donuts 50 cents &dcfi cake or giazatl 




Hot Donuts 

Just in time! 



Name: [Alan 
# of cs.kfi drnutg; [lS 
# of gtezed donuts: |4 doien 
Minutes lit pteKup- [lO 

Subtotal : SsJi .50 
Tan: jv^.91 
Total : |^34.41 

Place Order | 

Ch>ne 
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存储数据 



JavaScript 填字游戏 

数据不见得都以 JavaScript 码储存。有时候 ， 它们也会敵在填宇 
游戏的字里行间 . IE 等咎各 位发掘呢^_ 



横向提示 

4 -吳休 在劍遠一段軚枥时 I 也扣 定它的 让， 就 A _ 

fi . 用于提及一役敗找的拄神 H . 

7.用于创建变量的 JavaScript 关键字， 

9.3. ]4. E L 52叨都诔于这种权掂类堂. 
to . 关亍諫 埤 大小写命名奸识符的坫肛饰洲，的如 
ThisIsMyMame . 
n , 非数字， 

12. 值能改变的一段信太^ 

13. 軋有 值的一 fUt 怎1 将存储为达种敕掘要 


纵向提示 

L 值不能 At 的一较 Ji 息。 

1阳于存诂字符 I 字垧和枋语的钍据矣 

1未设宅边时，这肢軚权被裸为_ 

5. ?] 千转祛字符争玲蟄致的内 JtJavaScripl 而麩 .. 

fi . 磷 iJL 用户输'的找捆正如其调用途的 检查过枝 .针 

为 _ _ 

10. 珩于钊建常蓍的 JavuScripl 关犍芋： 
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JavaScript 填字游欢解甚 



JavaScript 填字游戏藓答 
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存储数据 



请垂 S 对折本页，模拟左 


右脑的区分. 
提出的谜团■: 


并解决我们 


Page Bender 

我们 想对瞄本的数掩要求什么？ 

- 4甚在宅姑枋螃窀 含设! < 一 




ffl 户输入的数掸， 

是种你不该无彔件信任的数鸪^ 

假设 ff ) 户会输入数梅，还会检蛮数箱是吿 王碥, 
完全是种不安全的假设。更安金的存储方策， 
将甭要 JavaScript 。 
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探柰窖户縮 


+ mmi 



f * SP ^ g fit ,戏逋作 姑 sat 
& 其 #1 恧的響户。 艳达种 人金身上齐金先 W 
尚 + 传若薹没笮 am 达神阁头 jte 钟人，他 
不知遙邊怎么 it 41劫起来………… ta _ j 


有时候 ， JavaScript _要知道外在的真实世界如何运作。刚开始， 你的 

脚本忒许只足.网面丑的代吗，但敁后终将存活在浏览器 C 成称靠户端）打造的 
肚界 ai . 聪明的脚本通常盏要多 r 解外在的肿界，才能$浏览器沟通 T 才能 e 
加 f 解外 / f . liLW 。 如汜和浏览器打好关系.尤论是找出®萜尺是访问浏览 
器的打肫桉钮 （ snooze hutton ) . m 本能利 ff ] 的 r . h " r 多哫！ 


进入新章节 


Download at http://www.pin5i.com/ 











J aVa S C Hpt h 客户端 i 服务器埔一-三角习騵 

窖户故，服务器端 v JavaScript 

月細 M ■人〜 段 1 ^ 撕 ㈣ 都触某 个网站 
5 ; ： _浏览器呈細晒前〜刻，代码才: 

人动作 ㈣ ，喊柳 m 料細關州交 s ， 射哇剧 , +isttisi 
页_器鬼运行 ㈣ Cfip : 代码的部分称为 JavaScHp _ 器 


①浏览器向服务器请求 
网页。 


• 06 


客户端 

Duncan 1 ! Just - ln - Tim « Donuts 


Duncan's Just-In-Time Donuto 

Aff donuts 50 cents &ach, cake orgtazGd! 



CD 


Name: Alan 

1 

#of cake donuts: [IS 

■ r 

1 

# of glared donuts: [4 dozen 

1 

1 

Minut 邮， til pickup: |1D 

f - 

Subtotal: |S 3 LSO 

~r 

1 

Tax: |S2.91 

1 

1 

Total; IS34.41 

T 

• * 1 
Place Order 4 


Oonm 


免兔 条器揉#求仔向 
事物。 


® 浏览器呈现网页. 


^ 也验证表单域 & 




<D 订单 ■■■-- 



:旦网贞传 送到浏 览器厄,胙务器大致就己退场了 。事 

H & 收邮 的_行为均 

这一点使側_有更多贵任， __不 

这种处埋就是』__ 

极称为戽户端语 a 的原闽 ， 
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探索客户端 





请求网页 




提供网页 


^body > - -一 供响应 

<div ( id= h frame" > "Hr _ 

<div 他 ° nUtS 50 咖 h each, ca^ e 0jr glaz^d^^ 

<]mg src * donut time , pno - alt T • 

^ J dit ， Just-Tn-TiiDe Donuts- /> 

<ciiv id="right■> 


c Vdiv> 
^/dj v> 
</Jbcdy> 


^hLin] > ""~~~~ — ~— 

< bead > 

<EitU>>I>Jn ^ n ' 5 ^^-rn-Ti^ Do 叫 ts</tit ]h 


- Lyp g= ^ /. a ri^Ttr ： 


css ik ㈣ # U 4 


B «. I 


JdUflSfTE^t ii ^ ^ ^ 

^ 本制冷玲 U 用 户徐人 


Cg ) 服务器以网页提 





你能想到其 他适合 由客户端而非服务器端负责的任务吗？ 
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别问你能为浏览器做什么…+ 

先问浏览器能为你傲什么 

你的客户端网络湖览器负茕执行 JavaSeripr 代码，_ +因此得以访 H 客 
户端环境&例如：取禅浏览器窗口的宽度与高度.类似闹钟的叶时机 
制、对 cm 如 e 的汸向……这些有趣的浏览器功能郎将对 hvaScripi 敞汗 
kn , 因此能在离开网 UI 其 _ ii 关棹浏览器后# 储数据 。 


浏览器度量单位 

浏览器的度进单位 ■ 乜栌各 
种尖子 “尺寸”的龅 y :t 煥 
浏览器窗口，吋视阔豇范脚 ， 

贫它 还有制 造疝与版本編号 
等信息 a 



浏览器历史记录 ， 4 . 

浏览器的历史记承 ，即椒 新 
麥现过的网顶 * 你町以使用 
javaScnptUjN^^^-^* 

讎器卵肖效+ 
他创速自己的浏览器誶览控制 。 



C^^Dlip 


Cookie 

cookie 醜 变盈， 贿器 把它 
存储在用户的 ㈣ 里，雜 
期间超过电 一 web 


session 


(会话 ） _^换句话说 t 你可以 
放若某个网页梢后再回来 T 数 
据仍然等存你 。 



定时器 

定时器可以在特定 
时] iili ± 去后触发 ■'段 
JiivaScripl 代码 a 


客户端能为脚本服务的功能不只这鸣 T 但你应该看得出来 ， JavaScrSpl 


的用途远大千控制中的元索。饵实卜若能看得更远、超越网页 
并取得浏览器的 - 点帮助将对很多怙况大有帑助^ 
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探索客户端 



问 1 :所以说， JavaScript 是客户 
端程序的一部分啰？ 

^ ；没错。支 # J a v a S c r i p t 的 
网络綱览器附有 JavaScript 噼埽 
n , 觯释器功 责在问 I 上解读 
JavaScript 代码 ^殊后运行， 

： 如果 JavaScript 代码在客户 
机运行，它为什么跟服务器有关？ 




茶 、 JavaScripl 多半不会直接与 
问络服务器有关系，因为它在客 
户机上拽立运行^ JavaScript , it 
常用于拦截从服务器传递到 浏忆 
S 的 H 络数据 i 但也可以编写向 
网站请求信息的踟水，然后于网 
页上1现信息 4 il 种脚本技禾称 
为 Ajax ,我们会在系丨2章讨论如 
何使用 Ajax fl 


闷: JavaScript 能让我们控制客 
户端吗？ 

9 :斗以……但又不行 。 蚤然网 
络洌览玆允许 JavaScript 访问 客户 
瑞坏境的特定部分，但为 r 安仝考 
i " »洲見器不会放任 JavaScripl 
有无限的自由 D 例如在没有邓户的 
闲意时、大多故刮見器郝不准脚本 
擅自开启或关闭， 
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( dock 乐过头 3 


iR ^ k 的新问题$用户的期望有虛拟宠物的概念在 r 应该尽可能 
接近 /i 实的宠物。你的挑战躭是找出如何改善 iRock 的行为，让宠物 


召€衣-实 D 客 P 端的网络浏览器戍许提冇解决这个问题的线索 


还记得 iKock 1^?你写的 JavaScript 代码实在卟常 成功， 有位年轻 
的创业家 A】an 买下了 modt c 冇一夭，他找你到办公窜喝咖啡一… 


拓 ㈣ a ……㈣ 


因为 JT ] 户对干 iRock 恒久不变的笑容感到 Ti 骨悚然。没钳.我们都 
希铝宠物开心怏乐 t 但 iRock 的情结范 m 似乎极度有限。 










iRock 有情络 


iRock f 要更布沄应 

ih 我们一起为 iRod 免思广益，想想■些峙能会)彳】到的行为，〖上宠物 
迟 H 真实性，1用户更 沁亲密 ， 3然也耍虹有交互性，丹.想中 . iRock 
增加愔绩范闱沿 t 应该虹能响应川户。 



戌 10 h t tp://wwu/. he»dfirstmtS,£otn/b(roi ： 6/hijs 
^ o 的甚后 一段忮 4 代译 


iRock 将陆机 ， 奄允理 
由地％气 T 用户必须想 
办法安抚， 


石头， 

lROCk 在你关闭阐贝时 
竑出哭 Hi T 并要求用户 
彌续开宥浏览器 ，别让 
龙物 fT 储绪诋落。 


石头，呆! 

如果■太久没玩 ikock t 它 A 
将回到发呆股的表情，用^ 
户可以不定时点由一 
唤起宠物础战力 Q ， 
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物石开始 发蚨” 的恕达 I ■分有趣、想必能刺激用户 
q 宠物石 辽动， 乂不会增加心 PU 负担，还能为用户带 
來 iRock 积极响应的奖励。你而对的挑战就 足：以时间 
为根据 t 利用 JavaScript 改变 tRock 的堊现图傲。我们預 
待一段时问，如果用户』直没有点 AiRock ,则改 
变 iRock 的状态 n 


*. .…5紗后 



川户在-段时间内没冇点由 
宠物石 t A 


iJRotrlc 发呆了 
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时间站在我这边 


定时器逢狻 J 行动乌时间延迟 

JavaScript 能设定 定时器 (timer) „ JavaScripl 定,时器的 I: 作方式很像 
闹钟：先设定闹钟隄来的时间；设定的时间来临，即触发某段代码或 
某个沮 恨垃， hvaScnpt 定时器丼 非在指定时间点触 发程序代码, 
Ffii 是 在一段 时间流逝后，才触发租序代这-点刖小'是问 题， 你只 
赵改成思考时间延迟 (time delay ) 的问题〔 [fif 朴:注洽财 I 试是否为标 
准时间十二点零分）。 





现在 


定时器辻我们 


吋闵 — M ■畔譌床 
这级代场。 


稍后 


时闷这@ 躬. 
秘 SPif 止, 




玄的思 lUStt 芄苹的松 


JavaScript 定时器让我 们在讣 时终止时，几乎可运行任何程序代码. 
厉吉吧 t 冇些定期改变数据的网豇 E 是利用定 时器： T 一段时间延迟后 
我处新，有些网 页則会 定期桧测户是否与网 页交 包。 


能在一段討跟 
浪逝后，才运行 

JavaScript 代码。 
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柝藓 定对器 

在 JavaScript 里设定定时器有两个关键： t ) 速^时 间延迟 hime delay ) , 
2) 让定时器知道时限来临时该运行的程序代码 。 从你设定完成的那一钊起 T 
定时器4上开始走动 n 



时间延迟以毫秩 ( millisecond ) SP 千分之一秒表示*把理想 
的延迟秒数乘上1000,魷是你辋要的奄秒数。例如2秒等 
于1000至秒 。 


室规妇秸嶒总 


r 定时器终止时运行的程序代码，可以是任何你想用的 Jovci 5 crfpt 代 

码> 例如一行语句< statement > 1 许多语句（毎句均以分号结尾）， 


refresh(), SetTimeout fr*fx eB h, liOOCOj; 


t 旃 f Jl 荈负 


4 连另一个定 时苕 


nm'} hv a sc 「 i pl 定时器在终止并运行衍定程斤代科后 t 定时器 
就完了-拮束 1% 这种定时器称为单次定时器 (one-shot timer) , 
顾名思义 h 它只会触发一次程序代码 s 另外亦 可边立间鹇定时器 
(interval timer) , 设定多段间隔,只设定一次时间延迟 a 间 
嗝定时器每隔一段时间 .0PM 复调川 “ 定时器代码"，讧到我们 
U: 它停 止。 虽然问隔定吋器一定冇它的舞台， fP. 盖钽 

单次定时器。 




请把奄秒与相等的时间连起来。 


500 ms 
300,000 ms 
6,000ins 


5 minutes 
5 seconds 
1/2 second 
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习题解答 



a 取 


谪把毫秒与相等的时间连起来■: 


500ms 


300,000 ms 
5,000 ms — 


5 mtnute ^ 
5 seconds 
V 2 second 


设定时间 —— setTimeoutt) 

制作(单次)定时器的 JavaScript 内置函数被称为 setTimeout ⑴螭数 
箱要 的两项信息,分別是时间延迟 (time delay) 与定时器 停止时 欲运行 
的程序代码 < 沾至此 P ;" www .- headfirstiuhs . com/hfjs F 叔 ） 》 提 供这两 项 
信 息时没 有顺序 问题。 如下例所示 ： 


*00 ,000 f ^- r 
巧 to 分神 : 


c ^ 

setTimeout ( n> alert ( ' Wake up J ( ; lf . 600000) 

\ V_ v 


JiwaSdipl 代 tS>M 为字 
苻碌 $ . M vUktt- 
的？ ） 卑 


不每 & f < .布利 

八 Ci ^ J 


"-个 dLffT t 待 c 


上例调 fR $eLTimeouc ( 3幽数刨建一个等待10分钟 t 
而后掸出 alert 枢的定时器。 

600 r OQO ^ ^ 




时间延迟 10 分钟 
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爯 S 近 - 点： setTimeoutO 亟数 

这尨 setTimeout () 确数的一般胳式： 

g 赛这敘 t 
^^ S4 


Time-r code 


mer delay 
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笔上陴 


I jfleb , (itmi, 屬 
电伪晚成隼 & 袭 


请动笔设计改变 i K OC k S ff ■的 程序代码； it 窀 物石等 
待 5 分 钟后， 就从笑脸换成发采的表 情。 提示 3 iRock ^ % 
元素的 【 D 是 rocking , 发采 IS 像的文件名是 rock . png B * 


jJihtt-p _ // wwhT . htAdiitstlA^s , £{ t * vt /^( t(it s/Aijpf " T 7 載 Si ■件. 


角吁分埤么盘矜平个 
t 这鼉 _> 


扣问 译句. iy.-f ^ 
41 十时军免 


本砠诘句 k . 
终结. s 


fu ] 阳定时 器的设 定大致 U 蛑次定时器的设〖 I 相去 U 不过改为 


调用 set interval () 函数（艰次定时詻忠调用 sezTimeout U ) » 


var t imerlD ; set interval ( 11 alert ( ' Wake up! 1 } 

f ' 

系 fj 存璉 t 的兹 ilt 两悚 t 畎铎 . 

的 JD.. 


iO 分抻启 


Wikv mp! 


Wake yp. 




tipi 


(0 分钟 ； i 


序代鉍*迖®它的 


Wlkc up! 


P 


to 分神后 


Wak* ucM 


600000 } 


法 tl 毫秒只是千分之,一 
秒，如粟你忘记 

该以毫秒为单位，定时器到期 
的时网将短得很夸张。 


W * 枯裹孕吋 
何在 t . 


延迟时间必以 
毫秒设定。 


宠的 S 咚 A d d H 的 
代芘 


设定向隔定时器,即< r 每次间隔延迟到期时反复运行程序代码: 
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潺笔上阵解答 


《上解阵答 


t 弩馑角 农 ？1 孑扣荦 
咢 . A 毐 盎制淺立省的 
农 奩皂： fc 


请动笔设计改变 iRock E 像的程序码 ； 让宠物石等待5分钟 
后，就从笑脸换成发呆的表堉„提示： fftock 图像元素的 IE > 
rocklmg , 发呆图像的文 件名是 mc - Ar ./ j 叩，* ' 

5etTimeout( , 'dccument,£ietEltfrnent&yldf , rDeklrn£i'"].src - 'rock.pnji :". 

_ - - - - - - - p - - ■ - - - - - - - - - ■ - - - - . V. . - ? - r - - - t - g - \ - - - - r -*■■»-■■ s- 1 pin p i r i pi-ipi-Iip ^ t ■ r e ■ ■ ■ ■ r m r n r m r 

5" 60 * 1000 )： 

a fa d I. d b J L d • J b J b-l&J b d Si J S .1. B S .1 fa .k b J. J J 



边迈吋问洚 S 分神柒 f 60 
痴 i? 巧#走. A^i ； fOOO, J$f 
3 f 為憙衫教。 



0 cpnf 元棄的琢. fi f 
设定扣 SK 象 亡蜱 . ㈣ 故 
t ihdt 的® 深， 


田礞充 f 

tfb jo 


成淳中的怎 


iRocIc 孖始泼杲 J 

if 确认你已络修改过 irock . html 《细 奸如解答所小 _) t 冉侧试一 
下 iRock 的彳 j ■动吧！现在， iRock 独处5分钟后 < 旯:關 〗 tl 户没冇点击) . 
就会进人发沾状态。这种时间迆迟成许让龙物 沿来冇 点 U ) 要人类的疼 
爱，不过我们就是希望抓住用户的 fK 寇力嘛！冉说，笫踅主人关心的宠 
物.才算得上是宠物啊…•■- 



St 3 ■ 

许 f a 



的逋笑很悚軚■:右 
S 得典或 


阳较短的延 id 期哏，就能加诀 iRoe 的 
情緒改变速度 fl 适合快速測试枷本、 
又不用每次真的都要等个5分钟 n 


有个定时 S 戽的在 
的■■站筅时 i^T 屮老0 d 




U 技窖新知~~ 

调明 setTimeout U 為数时\若采 
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~有蠢砸 


定时器婷货荛4或 


问:如果 iRock 过了 5分钟就开始 
发呆.为什么不用间隔定时器？ 

^ : 签案与单次定时 IS 的使用方 
式有关„虽然宠物石每燏一段时问 
就要发呆 h 但只在療本状态是 11 微 
5 T 时.才开始计厍立仑时间，点 
击宅物石的同时.定时器开始例酞、 
娃过5分钟后.改为 M 发果" 状态， 
旦直到下次 A 击，都堆抻在发呆状 
态 4 听起采不涞间腌定时器的工作 
方式——间塥定时器每臈5分钟 
仗会轴发，与用户的行为 无关， 

f 5 !: 如果用户在定时器终止前就关 
闭了浏览器呢，会发生什么事？ 

答： -X f , JavaScript 辨释 S 随着 


h 因为定时器是以延达为设计 
基砝，而不是根据确切的时间，我 
ffl 必舛把时间#换冷时 H 延迟，所 
以必洎从预计的启动时问里减 
去现在的时间。这个升算需要向 
JavaScript 的 Date 对良倩用力 f * 
我们 会在第 9章仔细认识它， 

1 °> : 我有个数据会改变的网页 II 要 
每隔15分钟更新一次，该怎么做 
呢？ 

合；■请使用 setlnterva 1 () j^i It h 
设定一个每砀】 5 分钟启动一次的 
间项定时器，15分钟为900,000毫秒 
(15 ^ 60 X 1000) ,你需要定时器 

帮忙史新瓦面， T 闲用 location 


^ :我现在知道间膈定时器会東复 
启动了*我该如何让它停下来？ 

"w : clear Interval " % 这个為 
数用于清除 set Interval () 设置的 
M 睹定时器 clearlnterval () 
兩教需要我们传入间隨宅时这 
的 i d , n > 别于创建定时 器的阌 


測見器一同关闭 ， 所有切 vaScript 
代鹆也停止运行，包括任何未结束 
的定时器。 

问：我该如佝创建一个每天在固定 
时间后动的定时器？ 


对象的 reioad (} 方法为你服务、如 
下所示 I 

loCat ion.reload {) ； 

这个定时器异鸪丨5分坪就会触 
发丹页的史新+当然 ，你 也能利 
用 Ajaic {$ 12章 > 动态嵚入数搪, 
而不是重新栽人埜个网页。 


时，由呂 etlnterva . l () 返闯， 

错，疵啟也可以返因锫息。冉 M 了 
setlnr . erva ]( 〉返 I 马的位（例如存 
到吏量 t i merlD ) s 再把这个值传 
l ^ clearlntervaKJ , 就能清除定 
时器了，如下所 示： 

clecirlncervaKtimerlDi ； 
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JavaScnpt^m^~ m%mM 

本筒主题 T 网络客户端的告白 


Head Fir st ; 先谢谢你在 d _ 忙中 i 由空掊受访问， 

Bowser (浏览器）：真的够忙]宽搞定 HTML $ 
CSS 的大牌脾气，以及它们造成的网页排版 ㈦ 题，原 
本就 [1 经让我忙到分身乏术……现在乂加人了新角色 
JavaScript , 它完全是另一个空间的动物„ 

Head First ： 为什么这祥说？难道 ■) a _ vaSt : dpt >_；| 性 

狂野 . 很难管教吗？ 

Browser , ^ ,不是啦，#动物"只是种比喻。我的鹿 
思娃： JavaScript 带来 一耷特 冇问题 T 我一定要另外处 
理。我现在.多了葙 ii 】 av ： i & r i P t 代码的新 ‘ ni :， 祈祷这 
些脚本 T 万+耍撰写得太梢糕，在运行』 ^ aSchpdt 妈 
的同时，还耍 盯若 HTML 与 XSS 的表现 e 

H«d Fi « tt 听來嵙是车■苦啊 t 它们相处得奸不好呢？ 

Browser ： 幸好，屯们的相处是众多问鹿中最+严甫 
的-项 a 它们三个常常一起丁-作，不过 JavaScript 偶 
取会有点恶作剧 T 把 HTML 的外表弄得面目全非》 
貞正的问题存:丁-我无力阻 Ib 这些恶作剧 . 我 R 足个办 
革跑 腿的小角色而已, 

Head First : 你的角色只能唯命是从吗? 

Browser ； 这也垃-种说法啦 .! ll 棺确地说 t 我极 

度重视 ，致性 ( consistency ) c 我作常地照本窗料 s 
一切 ft 务就是接收服务器给我的程序代码，并依眧上 
面的指示工作„ 

Head Fifiti 就这你知 ii 指示有 问题， 还是照做不误 
吗？ 

Browser ： 我会塔巳所能解决发现的问题，不过这项 
任候很艰^^再说，这是下一次 的也题 （第 II 幸）。 
我们今天不诰该讨论“网络客户端"的角色吗？ 


Heact Fim : 说得对，我离题了，回题尨身力“客 
户端”又是仆么意思呢？ 

Brmv Se 心嗯，客户端主耍是指我位+网豇传递管道 
的“接收端 " ， 在发 出对网豇的请求后，等卷胍畀器 
把网•虹传给我。 

Head First ： 这项工作跟 JavaScript 有什么关系吗? 

Browser ； 岂止有 关系， 人有兵系 咧！ 在找辛苦地呈视 
网页排版汴处理用户输人的数据时， JavaSmpt 就跟在 
我的背后,蘭偷伸予乱动版面-但 JavaScript 也有奸的 
一 EL 它带来很多我一个人根本办不到的魔米。 

FifS| t 例如？ 

Bt ^ ser ： 以前， iT ] 户的鼠标光标 移过阁 片忒调笹浏 
览器窗口时，我都不敢乱想加上什么特殊举动。但 
JavaS ^ ipt 则 不然.也就是为 ： T “特殊举动” ifiT 十 
以脚本改变网页外观，或基于客户端的改变而 M 新调 
整网 页内 荇，这些对 JavaScrirn 而占都是家常便饭„ 
不过我可以接受，因 XMa ^ Sunpl 代码仍以闸页为基 
础 s 只会影响特定网页或网站。 

Head Firsi ： 你 Iff 得 JavaScript 好像是只一个人 D 这 
世 t : 真的另有 JavaScript ， 还是一切都是你? 

Browser E 两种答友都对 t JavaScript 确实是我的一部 
分，卅你可以想成它布自己的实体 T 因为它能透过冇限 
的接 UlUi 向客户端——就是 H 我不会赋 T-JavaScripi 
访问“我的-切”的无限权力，这枰就太不负寅了，申 
竞我已经没办法控制淮会设计脚本叫我运行了。 

Head First ： 原来如此^谢谢你过朵说明客户端的相 
关疑问 a 

B ^ er ： 很高兴 能帮上忙。 
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多変的孱幕尺寸*永不消失的中诉电话 

Alan 刚把 1 '力 SHnck M 添怙访”的设 U - 费付绐你，马上又涌现一 
波 iRock 用户的夺命连环 calh 这次的问理似乎出在 iRock 的大小非常不一 
致上， 有些用 P 反馈出现“缩小石综合病”.但冇些) ti 户却严萤吉怕 “R 
看沿到小部分结构的巨大石久, Aj an 黾佶任的人就蛙你， 所以， mm - 
來士^来4十再度为他调粮 JavaScript 吧！ 




有普用■户茂 tRock 


:?一较 
寿軻〜蚌分 lR ^ 




为什么在不同浏览器上.会若 到不一 样大小 
的 iftock ? 
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大小 根戆要 

认 document 对皋取得 
窖户端窗的宜度 

二的：来’:：:::”以、并，存_窗 晰小 
_的贴上 + - 细■雜神阳_万 
卜的手持设备財:二細剧烈的浏览器 一 咖 
洲枕 晴如 


洌览器窗 o 里呈 
现闷页的鄯分 



探索客户纗 



客户端窗 p 的大小诺与网 
页协调， JavaScfipt 可透 
过 document 对象取得这 
项焙息》利 JR 同一今对 
象的 get : Element By Id {) 
方法. 甽可 取得网页元 
素_* document 对象的 
to ody .clientWidth 与 
body.cl ientHeight 特性 
里存储了客户端窗口的宽度 
与髙度 # 


dociment r get E1 ement By Id (■ rock lrr?g") ■ s rc = " rock_,h^ppy a png "； 
set Timeout {■ document -getElenient 办工 dU 'rockljtigi \ . src = " ro-ck.png 
5 4 60 * 1000)； 


<body onload= ■ greet-Uaer I) ?" > 

<div sLy 1&= ■Eidrgin^top 2 lUQpx ;i Lext -aligm center H > 

<iraig id= ■ rocklmg H src=" rock. png H alL=" iRock ■ style - ■ cursor : po I liter* 
one lick=. B LouehRock () ； R /> 

</div> 

^~</ bodty > 

</ht3dl> 


•没 


?再蠢向佐 

有塵 


闲我只是想弄清楚……网络客 户端. 浏览器 t 客户 
端窗口和浏览器窗口一有什么不同？ 

嘿，听起来是有点 a 人混乩，在万维网的通 
用语里，“ 浏艽器 w ( browser ) 意栺丹络客卢端 
(web client ). 因为它在内页的提供路径上处于客户 
瑞 . 担在硐 ES 坏境 I ,"客 户端" ( client ) 则有不 
同意义.此时它表示浏見器窗口！呈现网页的特定区 
域。所以，客户鸪窗 o 位于浏览器窗并未包含 
标题栏、工其栏、浪动条等其他事物 6 


问 t 为什么建议根据客户端窗口调赘 iRockR 寸呢？ 

^ r 客户瑞玄13提供杖怯的®涑尺寸調整基承，因为 
它反映了禺像呈现处的实际大小，遂可减:>1无法考虑 
的变责，例如附加的工具栏,不玛平台与孓同厂商而 
il 成的浏見器窗 O 尺寸差异等等。奉个例子， Mae 平 
台上的 Safari 与 Windows 版的 Firefos , 两者的 洌览 
教窗 口尺寸并不一袢，体它们的内页呈现区域（即客 
户端畜口）大小相同- 
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多大才叫大 


style .height 




atyle.width 


萆抻石 ® 译妗宽 t 


网豇上所有元素郎有一个 style 对象，借此可取得网页上任何事 
物的宽度与商度 s 苒想取得 style (样 式〉. 炻忠契先取得 ㈣ M 疋 
蒺本身 t 本例为宠物石图像（如果你还没 F 裁这个 ® 像，快连 h 
hup : NwwwMeadfir^tlahs com/booksfhfjs ) n 此时需要便利的好工 

- document 对象的 get Elemen 匕 Byld () Jjiht 

<img id = " rocklmg 11 src=™rock .png 


document. get Element By Id f 11 rockTmg'*) * style, height 


及果取珲 g ; 译的 ^ 


alc=" i.Fock 


；g ® f 电的 #' 改 - 


若想改变宠物石图像的 R 寸，只要指定图像宽度或商度的说。 
只设定其中一个值就能产生作用，囚力另一个值会配合图像比 

例自动缩放 U 


碎 _ fOO ptx^i， 


■document ： - getElementById ( ,r rocking" ) . style-, heigh 匕 


口 ㈣ ：二 


lOOpx 1 


设定 〖 Rock © 儳的宜度鸟高痘 

如果无法调 整宠物 石的图像大小 t 只知遒客户端窗口人小也边枉然 B 幸 
奸, 借用一点 CSS 的 能力， JavaScript 就能调销圊像尺寸（就兑 CSS + 是你 
的风格 ）* 阁像元索的 width Iheighr . 特性+只决定閲像剛丌始的大小, 
也葩十必贤时动态调整岡像尺寸 u 
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iRock 应紀含页®调整大小 


採索客户端 


目前 T 孜们还没提到如何根据客户端窗口大小而计算阁像的缩放。缩放必领与咨户 
端窗丨丨的大小成比例，戕们希罕用百分比 ( percentage ) 设定 iRock 的大小__ 

沾虽如 lJ 匕宠物心―罔像不是应该根据客户端窗口的宽度或高度 （二 选一） iTiltf ^ 
叫？基于浏览器的垂直高度较受限制，我们采用客户端溢口的高度 ( height ) 比较 
保险 , 



害卢媸穿 o 技 
島 ft . 


-1 


(clientWindowHeight - 100 ) * 0.9 = rocklmageHeight 


♦J 余赛4 

m ^0% , 


这段 l 十兗可为宠物石图像设定垂直位发（陌顶端⑴ Opixe !) ,冉把阄 
像尺彳设为剩余商度的90% (0.9) ,有 时候， 这类汁耷需耍多一点 
挪， 才能找出 诂恰气 的数值 ■= 你应该用你的 iRock 试试， #■# 效果 
如何……不过V先利用 w 磨笔上阵”练习一下吧! 
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康笔上 畔解答 




谙完成 resizeRocki ] 的程序代码。你应该根据客户端窗口的 
尺寸，缩放宠物石的大小。另外 + 在 onload 亊件处理器中，除 
了 cjreetUserO , 还要加入对 resizeRock [) 的调用。 


d0CU ^^ 

分? Curne !^々 0 # 5 %n tHejght - 1 00 ) * 0 , 9 ; 

… … （.. ___ •■ 

—一 _ 圓 — 

onl 0 ^y^zeKpck{)；^reetU serQf 


<body 


复习要点 1 

■ setTiinecmtn 函 数让我 们创建单次定时器，这 ■ 网页元桌具有设定样昃的 s ^ y 1 e 对象， 
种定时器将于一段时限后触 i^JavaScript 代吗 a width , height 都足样 xL 

»设定依固定间隔启动的定时器，请使用 set - ■ 客户端窗 li 足浏览器窗 tl 的一部分，只负贵呈 
JnterwlO 创建间隔定时器。 现阐 M ， K - 他不关它 的餐， 

■ 必以奄秒 { millisecond ) 为指定定时器时限的 _你叶以透过 document 对象的 body.clientWidth 
車位 1 1 奄秒为 T 分之 _ 秒 =< 与 body ."client Height 特性，取得容户端窗口 

的宽与髙 - 
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探索客户端 


你的 Rock ……进化 J r 



用户的宠物石 不再有 问题 T Alan 正准备给你丰取的入股权 g 太家都过 
得幸福美满■…哲时如此…… 


修改代码后， iRock 进化为适应各种浏览器环境 
的新一代物种 t 请确认你也吏新丫自 d 的 m 
himl , C 第 104豇的解答相符 ( http :// www . 
headfir ^( tabs,cotnlbookslhfjs 卜 - 故> , 1己押多'采用 
儿种浏览器 1 g •窗 n 大小测 U 网饵钱入结果 a 如米 
你版总，也可以在 iPhone 上认诚哝！ 


來物石的梅 
. y-Hr : s . 5 = 


" 4 ^ 没角賴 




R ; 我还是不知道 iRock 图像尺寸 
计算中出现的 H 100" 有何作用。它 
是何方神圣？ 

答： 请看 iRock 吒萸里的 HTML / 
CSS 代妈，它们把困像放在 J £ 离 H 
页 『 S 鴣 U 〗0 pixel 的位更，才不会显 
丹太篆迫„先滅去 H >() pixel 的位移 
再以比例(90%)计算图嗥高 
度，即可维抻设计美爭，100 pixel 
—点都不冲铋，只是大多扠測見器 
都很适合加上这段距禹。 


1^1 !我能利用 style 的 widnh 与 
height 特性，改变任何元索的尺寸 
吗？ 

答: ； L + f . 希望保■由秭早的举例， 
大苹都能了斛 JavaScript N ■于网页 
内容的强大操控力責\ 以 iRock 的 
脚本为例，先用到查谛客户瑞窗 o 
大小的能力，然后把查到的&寸， 
当成改变围像大小的根掂 


R :为什么不在标头 ( head ) 
部分的 JavaScript 代码里直接改 
变 iRock 的图像尺寸 T 反而要用 

onload 事件呢？ 

答;囚为 丐页在 onload 事忤触发 
后才会栽入。如果你的 JavaScript 代 
码（就像 iRock ) 会取用网瓦元素， 
你就没办法在 onloiid 穿件发生前运 
行任坷私序 代码. 
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动 m 改变 r 寸 


苕龙我们泰后； r 谪蘩別踅 s 的尺寸书？ 

《十么究化？它齣®佴还金馀对在相同史寸铒？ 




什么都不会发生，我们的石头不会动态改变大小 & 

有 呰用户 4 能会调幣浏览器窗 丨丨的 R.h miftixrk + 会陆之变化 
大小 T 想必川户对此不 太满尨 ■= 闪为，宠物石阁像的大小只仵 
网页首次载入(在 onlc ^ d 举件中)后 调整。 此后,没有任何 
行动能#致 m 像调整 nd 的太小， ± mr , 我扪又阅到问题的 
原点; 


I ^ 



o - 吋皤荈吞徒, 
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洌览器改变大小时蝕岌 onresize 事件 

为了 U : 宠物 Yi 阁俛能随（洌览器的）客片端窗 t ] 等比例缩放.你的脚本需耍知道用户何时调 
惶了浏览器窗 tJ , 浏览器九小的改变盖透过 onresize 丰件沟通. onresize 丰件于浏览器 
有0：何尺寸修改时被触发，此时荇想 一坪调 铯网贾里的图像，你得捕捉这个电伴。 




0^6 


IbC ViRIMtPH HOCfc 


亡 个 


调整浏览器窗口尺寸将 
触发 onresize 事件 ■…. 


……导致事件处理代 
码的运行 & 


<body onresise="doSomething f) 




磨笔上阵 



onload ! 


omesiiie 争件&牛_时煶供响应，只要在 < body > 标笠 
的 onresize 属性里填人 JavaScript 代码目口可。 


下列三者里，有一个和其他两者不 一样。 谪问是谁不 一样？ 为什 
么？ 

onresize onelick 
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廉笔上辞解答 


磨笔上阵 
解答 




下列三者里，有一个和其他两者不 一样。 请问是 m 不一样？为什 

么？ 



onresixe 


ORT*jii* ip 由用卢 M 農 ， fS 5i) 不然。 


onelick 


onresize 事件调整 3 寇物石的大小 

好厂我们 Q 经创建了调够宠物石 凼像尺 寸的函数 + 享受成果的时刻 
到了。为 T 紀合浏览器窗 （1 尺寸的頃轱而改变宠物石图像的大小•你 
必须调用 resizeRockO 由数以晌应 onresize 年件： 






子到 KS 家 O 足 螯的餘 

vT ^ 


<body onload= l( resizeRock () : greetUser 0 ; 11 onresize= ,t resizeRock () 



两赉芒度載入的,仍金谋鬼 
ttaU^RockO 基教 t 以议龙 


4左專件的可 以调 用多跋 


较夺 ， =.龙讲 H 器笛 c 1 碣，了足 
^ ■ 也含谋用 irrskettoctO 备 


浏览器窗「I调整尺 寸时， iR0Ck 终 扣会白 动修〗 R 图 
像太小1% 

onresize 事 件 

能让我 们检谢 捋嘀应 
浏览器窗 © 尺寸的调螫。 
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探索客户璃 




法意 


以 JavaScript 调 
整图像尺寸时请 
小心。 


尤其在放大根小的围 
涑时史要盆意 3 困笨的品肩将蒙 
受喃放之害 。 




onresize ! 


lavaSic^cpI 检 測 W 害户揉的破 4 r 
链印因廢磕金澥劫5 il •螫珣 W 



AadL ■ Th* 说 !|_ I 




onresize ! 


闽为 iRock 不再受阴于五花八 n 的沏览器尺 Ahn 冏直可以 
過受珂用户此后的心花怒放 [j r 況 k 不只作侧价-竑次钱入时配介 

浏览器的育户端窗口 rffi 调整大小 + 还会在用 A 改 变浏览 器大小 
时一起修正。 
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哲时性浏览器失忆症 


我们见过蚂？记住用户 


iRock 的 尺寸问题已成 为历史…… 也你冇 没有想过：如果用户 
羟常点 ± tRod 为 r 不让宠物石陷人发呆牧态，该怎么办呢？ 



还有，用户重新启动计算, iKock 将处十何种 状态? 


虽然 iRock 以前真的兄过它的主人，但却忘记了主人的名 
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每令脚枣都有大皞 



tRock 的失忆症其实与唧本的生命周期 ( lifecycle ) 有关，生 
命周_将影响存储在脚本的变盘里的钕据 3 


JavaScript 子 剖览器 

^ 闭或 闷页重新数入时 
mu “所布”变蚤。 


onload! 


壚点 吞劝祕 体 

Jttipt i % = 
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cookie 





cookie 延长瞄本的生命固期 


我们在 iRock 遇到的问题，有今专有芯持久性 （ persistence ) ，或升该说 
是 u 缺乏持久性 " 》有时候，我们真的需耍 ■^会 消失的数据. ft ! JavaScript ^ 
设的 屮命却如 M - 花一现，十浏览器关 W 成网似史新的弹指间消逝疋踪 . 浏览 
器的 c ^ ikie 提供 f 持久地存储 数据， lh 数据比_ +生命堝期史 松的方 


乒培器的..劣本把阁卢名 

CDofeitf ： , 


r 


到锼磊存诗〜 A ie (用>名 
彷）子《盘 i P W 東*全 : , 


cookie , 垃浏览器存储在用户计兗机里的一块数据。 aokie 很类似千 


JavaScript 变 y ：, 只不过在你关⑷浏览器.屯新载人网 M , 关掉计兗机的 
电猓、幣修房甩后， cookie 依然待在你的 it 诔机 1 U 所以， cookie 成了存 


的 [wkit- 


别览器係卩 絶冗 U 费 
奶達,的备杆 ^ ki *^ 


fi-S iRock 用户名称的便利 选择, 
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探索客户锞 



脚本仍在运作时,有暂时性的 JavaScript 变 
砑就够了，但想让变缺 m 存话 超过一 次网页 
浏览，你盂耍另外把数据存储在浏览器的 
cookie 里。 tT 次启动脚本时，以 cookie 值初 
始化究 SL 然后干脚本结朿把变玷惶写 
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变最与 cookie [fi’ 51 面 


麻鶉费 话_ 


今晚 主题：变薄与 cookie 评估持久性 
数据数据存储的重要性 


变畕： 

真不知道为什么把我们摆在…起一你和 JavuSoript 
根本没有关系嘛！ 


哦……你这话的意思……不就是说我不算够格的数 
据存储力_案呜？毎次浏览器关闭或网 页 fi 新我人, 
我就无能力力了……哼！我可不像某人 t 企 M 的取 
搰可址非常容 姑呢丨 


或许吧…… 嗔? 你+是和其他饼干一起堆在那个狭 
小的房间 m 吗？ 


Cookie : 


这沾 只算说对了 -半- -没有 JavaScript 5 我还是 

能完成份内工作， m 我与 JavaScript 也冇重 要的关 
系“ 我提供了长久保存数据的 方式 n 你敁近大槪也 
发现了， JavaScript 的抟久性实在不怎么样， 


不荇钻取得？我-直都跟浏览器待在一起.准备隨 
时被调用啊 j 


是啦……怎么样? 


如果臨言届文. 寻找 cookie 是项很花时阃的行动…… 
因为你们 全都堆 在一张庞大的舛衷鬼圯想到就觉 
得头 • 这就是我说的“不容舄取得”。 


呢,蛙啦，我们 cookie 都存储在 — 张庞大列表里, 
但我们的名称部不一样 t 要找出我扪苒实没那么 
难。只耍知逍如何 分解列 及，就能:找出名称 




谙写出其他你想利用 cookie 持久存储的网页数据 u 


JO , 妫*车内銮，译言 
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加 昼 

又里： 

你说的没错，也也正是叫题 所在， a 完仝+盖耍 
什么列表，只要叫我一声……我就出现 n 


抟久性是很好 ， m 允法解决毎又发牛的问遇 u 汀 
细想想.哪来那么多盅要永久存储的数据。私实 
上，暫时存储数据 . 使用完 毕就丢 弃数扮 l 通常 
反而赵有效串。这就是找的舞台。我是脚+数据 
的终极荇时性存储媒介， 


冇趣的视点，不过你以为那些物品是怎么放人抅 
物车的？人多数购物车都依赖我存储昀物时的鲟 
时性数捌。我也很屯要……说不定比你更 
虽然我垃有点健2啦。 


mui - a 我们分别解决不同的问题，实在没必要 
互相竞争。不过_ 我述 是耍坚抟-点，我的蛣存 
取性还是优于你的持久佯储能力。 


什么谈话? 


探索客户端 

Cookie : 


少存.那边0鸣得意 。接 卜_來才是真正里 要的制 
题。如果用我存储数据，我永远都记掙,+管浏 
览器玷否已关闭，或网贞是否11新载人 D 我是永 
付……除非用户选择淸除所有 COOtie „但这不是 
今晚的 W 论主题。 


随便啦……我觉 得你太 小看抟久性数据存储的审 
耍性 T . 你想想舂，数天后冉度造访网络购物， 
而所有持买物品都还在购物车上，这不是太神备 
f 吗？这种縻术都要祥我啊1 


听起来我们好像能够互补耶[我-直以为你是敌 

A . 


你就迫忍+住要占点上风，足吧？我会找个池方 
好好休息，反正这页-结枭，你就忘记整段谈话 


我就说吧【 
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莓户端的 cookie 存储 



O 



你不需要用服务器存储琐碎的信息，例如用户的名 

称。 


没错，还有服 务器。 服务器的确是个抟久存储数据的选择，但 
它可能被过度琐碎的数椐祈磨全死。在服务器上#储数据，流 
要在服务器上编51?序代 d 还#准备存储蜞介（如数据库） t 
M 务器编杩与数据库存储 t 对 f 存储持久川 于简# 客户端脚本 
的数据(例如 iRodcfl 要用户的名字），好像冇点小题 大做， 

cookie 让我们能在宮户端长久存储数据，乂不用把服务器拖 T 
水。不仅如此，如杲想楞脱 M 沉存储的持久性信息，川户也拥 
有清除 cookie 的能力 n 如果:数据#储在服务器上，用户就无能 
为力了。 



JavaScript 



Cookie 


镬含 窖 户端、 
mi 久—性 
数椐存 ^方案 r 
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cookie 轮录名称与数猙值 
••…也可能过期 


cookie 以独一无二的名称存储一段数据， 
这点很像变呈。但是， cookie 可以设定 
有效口期 (expiration date ) t 时限一到* 
Wm ^： cookie , 这点跟变韨不一样 fl 实 
际 i:，cookie 丼作真 的永悅 不变 t 它们 
W 是比变故的寿命更长。你也打 L!Jt 创违 
来设定有效 R 期的 cookie * 但是它将与一 
般 JavaScript 的变 M 没有两样——干洌览 
器关 W 时淸除。 

cookie L ■:又长文本丰符串的形式存储+川户 
的计算机>1，泫字符中的内容与网站（或 
网域）相尤-分号 丨；） R 稿各个 cooltic , 
i 吳取 cookie 列表及取用某个 mokic 时，分 
号将是关键。 


名称 

(^cioJeLf 

，■值 

userName = Paul 孕锌 fl <：cic6r * f 的详霉由容 a 


Expire , 3^2003 ^ 



® Ht e 的末 e? 











m 


cartlD = 1 
ExpirM 11 



ian«g = fr_cff 
Expires 6/25/2 A 10 



ifrcswil = Flat panel t#l#vt9i0n 
Eacplras 9/3/2008 



既然所有 codn; 邡存储在扣同地方，取用特定《>01^則#1 
微冇点麻烦 a 幸好，你冇份指示读取 . 写入、涪除 cookie 
的配方表，相关工作也就没那么恐怖了。 


readCookief } 


j ^ w ^ teCooltie^^l 
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用 JavaScript 处理 cookie 



JavaScript 

菜 


如蓽你 这沒方 4 完 IT 鹆 d 步 


m \ .. 没有关系■■… * fiii 看下 


4. t 龟吞运黾 I 


下例包 含二个处理 ctiokicr 的〖办助函数， th 各位较 fe 地写 
入-歧取、 cookie . 存时候，钕职明的处理方式在+ 
讥川儿他人的努力成果。淸取州我们的函数 hnpJf 

咖—响下裁），然后尽 ㈣ ] 在你的 A 
制 cookie 函数中 s 



// Specifying a nuinber of days makes the cookie persistent 

if (days ) ( / -〆 

var date = new Date(}; 

■date* setTime (date - getTime ( ) + (days * 24 * 60 * 60 * 1000)) 
expires = 11 1 expires = H + date r toGMTString < ); 


好 If 有绞 0 朗的 
龙天盎痴 U — I 

的兩 I : 


function readCoo^ie(name) { 

// Find the specified cookie and return its value 
var searchWajr ； e - name + m -' a m , 
var cookies = dcicuiment i cookies split C ' ? ' ) ； 
for(var i-0 ； i < cookiea,length : i + + S { 
var c = cookies[iJ r 
while (CiCharAt(0) == 1 r ) 

c 二 c, substring (1, c, 1 engf,h )； 
if ic r indexOC < searchMame ) == 0 ] 

return c . substring ^seairchName . 1 engeb^ c., length }； 
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你的 JavaScript 能话得比 A 页 E |久 


当 JavaScript 代码另外存储成一 个文什 ■后，你必须把文件导入 { import ) 任何 
索耍 JavaSciipt 代码的网 5 L 以为例，屯箱要:被牙人至 iRock.html ]M 
UI 里 。 只耍对 < scripL > 做点小修改.就能 导入： 




<ecript types M text/javaaeript 1,1 src="c:ookie. ja" > </script> 


</ ?CT!pt> 



邨 4 


t 卿本代岛的 i 译的名 
d ’没掌 W . Jff rf ) i ^ ^ 



戌汶 睜栽 i 样教 r jecdf 扰 
存 — 喊加別作的 iRtJcfe .ftimC , 记 
供检豢 toafeic ff 4 S ^0 
间 0 杀下 。 


汙人外部脚 本代砰 孕:网豇时 T 文件进的所有 JavaScfipl 代码将嵌 
人 < scrip t >^ 签，就像把这呰代码岜接放在网页明只要 
昆能用很多次的代朽，段好郜 W 存为新文 件， 而后再导人 MM a 



为计么最好把可再利用的代码存成外部文件？请写下原因。 


■ nu : nu > -- 

,: -' i r le>iRoclc - rh^ i 

.. . ."rtual p et Rock</title> 

^ ^ r* t* -I •- . ^ _ 


. .. . " aL rec ^ ck </ title > 

㈣ —— 


function r es i 3eRockn { 
docLiiitent r g 6 tsl enientfl Id ,., 


再入的 _ 本代硌 
坍号 55 S 栽 入的 
ih fi 网费瓛 - 


furic^ion greem^T- ,■ 
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想来片饼干吗 V 






为卄 么嬸好 把可再利用的代码存成外部文件？请写下原困， 

代筚 的馬划用度 ： 因存放4孝一括 f 容易錄步： t 件的铂泛皂校鸬， 


利® cookie 欢迕用户 


userName ^ Paul 


我们前要一个经过 cookie 加持的 iRotk 脚本，若用户名称已经存 
人 cookie , 新脚本可以提供用户专 M 的问候语，如果没冇名称，则采 
川一殴 1未个性化的问候 H 啟尨个两全 K 龙的好 办法！ 


€Kpir«» 3/9/2009 


JiyjlScupt 




才戈 cookie Kt 洱 角户名 
釘. 4存砵戊罢个 



use ^ Na - m © 


找到用户名称了吗？ 


泛 t 巧槌4用户名坊… 
或老 ff i 痒沒节； 
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^/O 敌大代码 



greetUserO 有？ cookie 的神力加特 

函数 greetUser( ) 就像一首变 S 与 cookie 的重唱曲 t 从 cookie 中 
找到的用户名称将存储在变诂但我们不能全盘指望 cookie 存 
有- 切名称…… 妞果叫 户第一次造访 脚丰， 未曾输入名称，该 
怎么办呢？所以，范例代码检査变 A 是杏存储 rcookie 提供的名 
称——这项检赍决定采川个性化或-般的 问候语 a 
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碰一下点一下 


别忘圮设定 cookie 


成取 iRock 的 cookie 还不错.是个好主盘， m 別忘了一开始要设 
定 cookie , 写入⑽ okie 的1:作应该由 tiouchRock () 函敎处理（它是 JH 户 
点击龙物石图像时阴用的函数） □ touchRockU 已提洪/输人叫户咨你 
的方式 ——• 现 在只需 要把输人的名称笃人 i ㈤ kie 电。 



userName - proimpc (''What is your ^Enter your name here 

.if [userwame) { 

alert (' It is good to meet you, Hl 4 userName + M . B )； 
writeCookie ( " irock_username", userNaine, 5 * 36 5}; 


Element Byld\"rocklmg") + = "rock_hap 

document. gectlementByld ( 1 rot kin 5 ,g 1 ) T sre 

000) ^ \ \ 


documer^L . get 
set Timeout {", 


用卢名称的 
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Ill 


pwy'il 


—- 


touchRock () 函数与 greet User {) 函数在很多 占面扮 演相反角 
色，至少在处理 cookie 时的角色枏反„用户名称由用户输人 f 存 
赌 "F 变贷中，肖写入 cookie 电， 


找到用户名称了吗？ 


ueciiriilame - 
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靶用/輪入的名蜉 
# 甸 S 4蓍_ 


n Paul" 


What ii your name? 




入 ffffffcee ■■ 


龙 iKfich 叛成 
後定 ffl 嚷。 


It is good to meet yau, Pkul. 






别乱碰饼干陡 

cookie 影唤浏 览器的安全性 

虽然大多数 tRock 阁户都很商兴 cookie 能治好失忆症，但也 
有少数人质疑 cookk 的安全风跄，这姑个好问题 e 个人数据常 
用 cookie 存储，但 cookie 实际 j_ 并未导致安全风险……至少与访 
问计兑机存砧的敏感数据 允关- 不过 ， cookie +身也非安令的存 
储场所，最好别把敏感数据存储在的此1 £ 里, 


可以，不等千 
应该。 

法意 I 虽％ ^ 5 ]■用 cookie 存 | 
； 储任何东西，钽它 

j 实在不算极度安仑的 it 据存餹 
；方式 fl 以 cuokie 存诂敏感 fe 据， 

!決非好主志 u 



cookie 只是一块文本数 
据，存储在计算机上的文 
件里 6 



因为 cookie 不是可执 


cookie 能存储个人数据 ，但用 
户必须特意上网输入 数据。 


虽然 cookie 通常存储于 行的程序，它们 不会散 

硬盘上，但无权 碰触硬 布病毒或螺座^ 

盘上的其他东西 ~ 
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有 盞问极 


探索客户端 


= cookie 总是存储在用户的硬 
盘上吗？ 

答:不！ m 使大多数浏&器都用 
硬盘存储 cookie , 但有些圳览器无 
法这 么做 。 例如某痊栘动设备采用 
特味存硓器（不是硬盘）作为抻久 
性的数掂存储方案，设各上的洌 t 
器即以抻久性存储器存储 cotikic , 
即使如此、就刮見器 {和脚 .本）的 
用度而言， cookie 只要记得数掂仿, 
圩后存陆方式为何都无关:^ 

； 我怎么知道 cookie 名称是否 
独特 ( unique ) ? 

答： 只 有厶指 定的叫页里， cookie 
名称才需务独 ，特。 因 i 为 ttwkie 存妹 
时会依创連它1的丹页加上区隔， 
其中包含网页所在的8站信息《也 
軋是说、网页实际上是 cookie 名称 
的一部分，至少就蚀特性 而言. 



良线：确认你的 cookie 在单一 H 站 
或网页罡具有独抻性， 

构. 不同浏览器能共車 cookie 的 
数据吗？ 

^ ；不行 __ 各令竭虼器 s a ■维 
护自己 独有的 cookie 级掂库，所 
以 Fire fox 或 Opera 其实看 U_] 
InterEiet EKpItjrer 设置的 cookie, 

1$ : 如果 cookie 这么方便，为什 
么有人会想把数据存 上服务 器呢？ 

答: 闷单地说， cookie 只速合 
存储相对较少的文本数据 < 少于 
4 Kb ) ——很重大 的限參 彳 。 tt 
要的一点， cookie 实在不太有效 
率，诈不会想浪费时閘一直读写大 
f cookie 故据 a 大 Hi ■据 应是致 
搓卑的闲途、而数据專逋常留在服 
条器上，虽然 cookie 非常 ii 合存 
钵小量、不玄占用服务器空间的数 
据片段，但并非达合所有问络致据 
的存储方案 n 而且 t cookie 也不是 
存储敏感钍栖的汊想方式，当初设 
i-f mokie 时 T 并未把安全性列人考 
量= 


: 有其他方式创建 m 正永远存在 
的 cookie 吗? 

^ ： 沒有 3 不管 你怎 蛘想，每个 
cook ie 都有有效 B ] 期 s 构忍 cook ie 
时、 并非用于长期 iM 居存储，甚 
至也不算中期的保4方龙„祛言 
之， cookie 这合把数槐保存个 几天, 
儿周或； L / K 如果你面对需要存储 
很久的数据，或许改为冉储在服务 
器上比校好. cookie 承汰也能朱存 
几年 T 忸.收睢保证用户在这 ； L 卑内 
不会 史靳计茸机， 重新安.装.或者 
干疏把 cookie 清空， 

问 t 讲 cookie 也讲够了。 
JavaScript 代码另外存储于外部文 
件.会带来什么坏处吗？ 

答 t 不太有 E 不过，请记得外部 
代码是在枝4代码需要出现在复数 
M I 时，让权序代码的共苹与维 
枳史容感 # 如菜是只出现在特定 
茱页的程序代码，把它存到卟部 
文忤也不会有什么好处； 除砟是 
吒页神别芨乩，泠了你自己着怨才 
把 JavaScript 代码蚀立 .. 出来。 



复习要点 " 

cookie 垃一块文本数据，由用户 U ■算机 tl 的浏 
览器下令#储， 

« cookie U：. 脚本存储的数据能存活超过单一网络 


session t 

-毎个 cookie 都有有效1』期，超过期限，浏览器 
随即淸除 cookie . 


把脚+移动到外部文件„是个讣程序处容易豇 
兌利用和维护的便利 方式， 

tmikie 不能访问用户的硬盘或敢布病瘅，但可 
以存 fil 输人网页上的个人数据。 
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你没有 cookie [ 


浚有 cookie 的世界 


无论垃去全 fp ] 题还是浏位器的限制 t 却有少数 iRock 用户并耒享受 
到 cookie 带来的好处，因为他们的浏览器不支柃 cookie 。 这件亊芡显 

T 大问埋 - iRock 假 设太家 都支持 cookie e iRock 依赖 cookie 记忆 

数据迠 一M '審、但不能 〖h 用户不知道自己错失了完锫的 iRock mt . 

O 

o 




牟奸浏 1 兑器有个吋供份 : fr: cookie 支行的特种 . cook IeEnable 特性 
: navigator 对象的一部分 + 该对象为 JavaScript 极供浏虹格本身的 




不锥後 Mi 
幻蜱不能 3 S 
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鑫 


greetUs^r (} 与 r'emehRocki ) 函数补 _t 不见 码’检 
査浏览器是否支持 COflkii 还要帮 touehRocM } 函数加上告 
知 “ 无法使用 cookie" 的代码， 


function greetUser() I 


userName = readCookie{ ^ irock^serriam^' 1 ) - t 
i£ (userwam^) 

alert [ "Hello " 4 aserName + ", I missed you. ir ? ? 
else 

alert ( 1 Hello, I am your pet rock. f )； 


function touchRock() { 

if {user 贴 me} { 

alert ( 11 1 like the attention^ rt +■ userName 十 11 . Thank you *"}; 

} 

else { 

user Name = prompt £ ^WhaL is your name?" x ■ Enter your name here* lf ) 
if (liserWame) { 

alert (“It is good to meet you, 11 + userName 十 11 . " 3 ； 


writeCooki e ( 11 irock_username' r , userName, 5 * 365) ? 
else 


doci-mert . get Element Byld ( "rockImg p, ) . sre = M rock_happy . png 11 ; 
setTimeout {"document. gebEl einenc.ByTd ( 1 rocklmg 1 ) T sre = 1 rock. png '；", 
5 * 60 * 1000S r 
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■笔上阵解苔 





请粗 greetUsor (} 与 touchRockt ) 承数补上不见的代码_检查 
浏 览器是否支持 cookie , 还要帮 touchRockU 函数加上告知 1 *无 
法使用 COoWe " 的代码。 


知菜支神 cookie , kL iRock 的 
cookie f 这 Si 用户名行。 


function, greeLUser () { 


if (navfga torcooki ^ EnabFed ) 


username = readCookie (" irock^asername '')； 
if j userName) 

alert {"Hello 11 + userName + ", I missed you 
else 

□ilerL { 1 Hello P I am your pet rock*-) 1 ; 


function touchRock(} { 
if (userName) { 

alert (" I like the attention, 11 + userName + w . Thank 7011 - lr ) ； 


else { 

userNsnie - prompt r_VJh 曰 t is your name? 
if {userName} { 

alert ( 11 11 is good to meet you, ™ 十 


Enter your name here.■}; 


alert ( 11 It is good to meet you, ™ 十 userMame + 11 . "} ； 

- __ 茑入记录用 户名你 

if(navfgatorcool^Ertabkd) ^ 一 ^ 的咖 * 

h J L d !■ ol Bi rl L I h J ■ aii ■ al d Jj B dl iri ^1 B ■ d .1 &『■- B .■ >lu l> |J I Ji ■• d !■ d !■ d k M i. d b ■■ L d iadftaj kJBa.Ilb.l & -I li uA b I ^ J & '!■ M I 3 -l> 3 LidiiAiJ kaS—afi m J ih J M J p ■■ M J m ^ M m ^ m 会 p m -f g ^ ^ p ^ p 

wr iteCookieirock-Usernaime 11 , userHaime, 5 * 3 65 }； 
else 

alert(“5orry. Cookies aren't 如 pported/enabled in you r browser J wont remember you later ,)； 

} \ W vKock 

docuinent .get£lement3yld("rockimg") . src = ™rock_happy . png'"; 

setTimeout('document■getElementByrd( 1 rock!mg 1 ) .src = 'rock.png 1 ；", 

5 * 60 * 1000 )； 
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有麋珊 


P 5 ) : 能够根据浏览器或其版本 ， 而 得知客户端是否支持 cookie 吗？ 

猃測刮览器是种不可*的編枝捷径，最后只会这成不可 ft 的结果 a 
測咒 E 白己四报的版本不可信輯 4 唯一可靠的 cookie 支#检*途柽只 
有 n^vi gator, cookie Enable 特』 


乌用户谗通 . 汫了总比 

M 然在没有 cookie 可用时，也没冇模拟 cookie 的好方 
式,幸好，向用户报告坏消息就能稍稍满足用户了 - 





岛多1 . ^ 

占 dU .) 另 一味良 

f 由 [ 
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攀上 iRook 2 0 的离嵘 


JavaScript 之王也会 

满意 \totk 的表现 



姻 W 助 iRock 成功的旅枵 
的 JavaStript 新鞋與的帘卜.不少足迹 □ 』 

的防助， 〗Rock 现在更 抖有 人性，不 晖 ? 死1 
小，而且记忆力也改良了 J 


浏览器的度复单位 
和 CSS 的特 

性，赋予呎 0 伙确 
认周遒坏境的能力 t 


c °okieitiRock 

记得数据，超 
越脚本的 
生命周期。 


Faulr 推右兴辁 
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JavaScript 填字游戏 

坐下来，换你的右脑运动一下，这是个标准的填宇游戏了 一切 
答案都来自本章的 内容， 



横向提示 纵向提示 

5. 十分之一秒， L 重复运忏一段私序代码的定时器。 

7-我负责管理 cookie 列表 u 2. 用于创建单次定时器的爲数 n 

«.—钟 JavaScript 机制，能在叶限釗临时运行程序代码 u 3,在脚本結東运行后，数据仍然存在，这是_, 

■Oxookie 包含名称、值鸟 ' 4 .刮見器窗 tr 调整 X 十时，触发_ 亨件 a 

11. _于客户瑞 存储 稍后吁能需要的愔息， 6. Web 浏览器的另一个你呼， 

12. 从円萸引坍外部 JavaScripl 代码的行为、称做__ 9 .cookie 无法散布这呰东西 n 
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JavaScript 填宇游戏瞬答 


JavaScript 填字游戏蘚答 
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窖户鋪才是 JavaScript 运行的地方 * 

也就是说， JavaS 叱 ipf 话在浏览器里。 

达是件好事，©为服务器 
玎认少拽心 一 些事， 

例如存鍵 cookie I 
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Page Bender 


请垂直对折本页，模拟左 
右脑的区分，并解决我们 
提出的谜团 B 座 


JavaScript 为何该在意害户结嘬 ? 


<r —— - iA 鼉左电竑吮秘智令谈 I 













4 决策 




前有叉路二面对抉择 



生命中需要太多 抉择。该停$或继续开、奶酪成布丁，当个污点〖正人或俯首 
认罪……没有下决定的能力,就无法完成任何工作 JavaScript 也 有相同的状况 
—决策 ( decision ) 让脚本 在不同 结果间 作决定，作决定，为你的脚本带来 
( 故事” ， 即 使是最世俗的脚本 .， 成多成少都牵涉到 故亊， 我是否信讧用户输入的 
内容，并为她预 1 T 一趟 寻找萨斯考奇大 W 生物的神秘之旅？述迠应泫再检査一 
或许她.想预 n 前往加争大炉斯喀彻温省的巴上？决定忮在你。 
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选我选我 


聿运的参赛者，来吒 r 

今天的节目是剌叛精彩的 《全民 猜猜乐》.马卜_就堤选出轵运的荃 
赛者…… 




淖戏？ 0 3疖人 
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决策 


选择，郗是决策的一鄯分 

拜托，他的名字就写在卡片上啊！还用问吗？没错 t 有名宇的卡片.，但你 
已羟把主抟人根据卡片上的名字作决策 ( decision ) 的丰 实视为理所当然。 
因为主持人是个入，而人类楦千处埋 怡息句 作出决定。如果主持人是份脚 
本，一切就没这么苘黾 
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mmm 要决策 


“如果”是真的 • ••…就达#傲…… 

JavaScript 其实已羟 U 入处理信息与决策的需求 T 其中一种应对方式 
即为 if 语句。 if 话句能根据汗估结果为 ImdfiUw , 作出简 M 决定, 
ifij 后有条件地运行 JavaSeripl 代码 D 


If (true/false test) 
Do something; 





載上 JavaScript teif 访句的镜头，阵看一次游戏 YiH 的范例 ， 将看到 
如下程序代码: 


砝认开古摩拍甚 5 甸 4 


if (cilos«nCcmtestartt =工 H Eirid： fr > 

alert(^Eiric^ come on down! rt ); 


ixus/i^t. 的检 I 必 ft 
哼轉异择 L 


] t ^， 乃是 f 
运行 — i 
i 序码的絕僅方 
式。 



■ 4 . 沒有分咢。 


H 译旬？ '1 饨球牵。 
tiue/Utse 的柃企 4 
* 令鉍导闲。 


Efic. comf or f^owiF 
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决策 
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if 语匂资贵评估条件 … 


然后杲职行动 
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飪个 i f 语句都依骷相同格甙 - 枉我扪帮 iRock ^ 
加 cookie 时,就已使用过这个格式.现在拆解开来 t 个 
详细 : 




Test coadiLion 


神却，^ T ti L fl ^ f ^ ^ 

lH 鲜 M 的该句也展 

的一畔分 „ 


清把下外 if 语句与相应的圩动连起来 A 


© 编 V 条件剛认句为 tme 时运行的代码。 


你应咳 iiMIrXi 干 if 语句格式的 -- 些细节。許先，只能利用 if 运彳 i 一 


段代码，而叱这段代蚂应该缩棑，列 T_ if 和条件测比句 1 ^过然不 
怂严格规定， m 蝻好都縮排代码，才容易看出足否择为 ii 以句的一 
部分。以 F 是利用 U 语句作决策的步釀 : 


以括号 13 起 true/f:dse_ 条件 _ 试句 (ictiL condition ) a 


© 下一行的枵序代码要缩悱 . 在行貧加上 几个空 格即可 a 


if 〖 hungry > 


flumDonuts * 12r 


il icountDown OF 


uaerMiame = redd.CoDk.ie 1 ! a irock _ uaernaine* ) j 


if [ domj L St e i ng. I n dex -0 f (* do ze n B t J - 1 J 


awardPri ); 


if (testScore > 901 > 


goEat() r 


i £ (Eguilty) 


alert*! "Haustonj we havei 1 itt-o££.*); 


I f ( winner ! 1 


^lerr ： I "'She's Jnnocent! "■) f 


if (ridvigator. cook ieEnabl ed) 


grddc- = 





习題解筈 






清把下列 if 语句与相应的仟动连起来 # 

"^― {fl, Sp .*6 tf li!€ e 


if (hungry)— 
if (countDown 


numDonLLts *= 12; 


userName ] rcadCooklet - irpck _ ugernairie *)； 


if (donut String.! ndlexO f (* dozerL ■) J 二 一 1] 
if (testScore > 90) ― 


awardPr ize (|; 


goEaiO 


if (Eguilty) 


a lert < M HaiJ3ton 4 we have lift-pff, P ¥ J- 


If (winner) 


alert j "She's innocent 3 *)； 


if (navigator,cookieEnabled) 


= Aj ： 


t 金蛞 "MOT . 

ffP "乇 5 T . f 6 


cpfffci* , BC ^6 




做这件事- “…或另一件事。 

览本以为 JavaScript 妥妥4当地照顾了大小牢宜，但冇不寻 
芾的車愔发生了^实阮 i _., 从多个结果中选择一点都不奇怿 
…- 巧克力还是香草口味、低咖啡因或一般咖_豆，看起来很 
多选择都牵渉到做第一件亊 T 另一件車。所以 i f 语句可 
阒榷为作 f 决定后.再采取一或两种4能行动……其至是迓复 
杂的行动。 
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利用 if 二迭一 

阑 整一下 if 语句*即可从两种可能结果中二选一。 再回 
到《全民猜狺乐》节 S , Eric 也面对了相似的天人交战, 
他卤前有两个不同选择，必须二选一， 


决策 





我们的生活很少只会简单地面对一件事。 i £ 诘句为我们 
( 和 Eric) 提供 r 选择 A 箱 （ Ca 访或 H 箱 (CaseB ) 的能 
力 a 但 JavaScript 究竟怎么有 待这件 半？ 


if (choaenCase ^ 
opedCaae( u K If )i 


, 帅尨嘁？如 I choa * nCAS * * 

c m m 典 


A 秘籩 Eiic 的蓽 

―个这 得…… 


if (true/false test) 

Do something ； 
else 

Do something else;( 


.®w 4 站的 # 

个 m 
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如果选择不只一个 


G 很多 

你可 ffi if Y 选择 

使用句从多种行动巾选择 t 就变成 ri [/■ else 语句，可于 tmd 
false 条件测试:央畋时，运行 >〗 一议枵 汴代码。也 W T •指示 ： 如果 （ i 「> 
_试为 inm ， 则运行第 M 段稈序 代码, 否则 { else ) 运行另一段程序代 

m. 

i£ (cho setlC^ a e 
openCa&«f Jf A") 
else 

openCafi ； e{ ) 


"A ,f ) 





Brie 选择 B 箱，所以 chosenCase 变 M 应力 M PT a .既然第一项 测试 
火畋了.即触发 if / elsed 句 @. fiel S e 部分的程庁代码，很可惜. 
Eric 选的 B 祐蛙一箱甜甜阓，而不昆他恕坚的谰祐钞黑， 
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决策 


在 if 语句里加个 else 

if/else 诸句的格式与 iflS 句非常机近，只需添加关键 
t elM 以及条件为 false 时运行的程序代码； 




Test condition 


□ 


StaL&wentl 


a 






如菜本设的 ㈣ 


St^tement2 



为 if 语句增加第=条行动路线 T 雜循 f 列 步骤; 


O 把尖 else 安迓丨:第一 m 行动的语句 （ stEiteinem ) 后。 
© 缩排它的 F —行稈作代码.以便阅读。 

0染其条件句拥试为 false 时欲运行的杩序 代码。 




P 5 ) :为什么在 if 语句的括号后没有分号？ 

i ? : JavaScripl 規定， 每条诰 句涓以分兮结足 T 
i f il ■句亦不洲外 1 然■而 ， i f iS ■句不只是 i f { T e a t 
Condi t ion ), 也 £ ■括条件句为 Lriic 时运纤的植序代码 T 
此时就需加上分号。所以， i £ 语句的确以分号结足， 
只要你了鲆它的正碲结构 3 

;如果条件句測试结果为 false , 而 Lf 语句没有 
else 子句， 会发生什么问題吗？ 

答: f 十么问题都不会犮生€此时.測试条件句的结果 
完全不会导致任河行动。 


有靈问极 

^ ： 有可能使用多个 eUe 子句，从更多可能结果里选 

择码？ 

答: 是的，当然 T 以构筑支抻两个以上选项的丄 f / 
else 访句，但可_不是增加另-"个 else ? 子句而 i v 你 
文把方一组 i f / eliie * i : 5 ■句戒套在原本的 i 5 ■句龙$知.菜 
有很多选梓，这神做法很快就定佴夬綾不清 4 错不在 
i f/el sc 语■句，而是 JavaScript 对这种需求提供了 更好 
的方式- switch / case , 求章稍后就会提到 3 
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火柒人太茛险 

壮丽的史诗級 f 险传奇 


正在沟思《讀人切 m (Skk F 
t 地_在故亊■巾的每个邮 ！= A ( Jv 咖 re) 的故 

望 JavaScript 的决策功能 m^t^bM'kltr sh _ ' 选铎时钊，所以她希 
户才能在网络 ^受補_的=祕錢向块择_题，_用 


•e* 


W&lco^e to 

STICK FIGURE 
ADVENTURE 




Click either 

rtart- 

c : jJ _ lI 


IIS 


《火柴人大挪》 崎付■齡祕既八龙 
:迫::則于苺萵场_到_ -选」= 

走祕个故 I 綠可至岭 /W 、 A j ， ■ 
&0&/ ¥ 办下载相应的 文件。 f ' 
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决策 


1 险孖始 



《火 柴人太 y ? 险]&由一连屮场虽构成，毎辐场 说郡有 -桢阁像勺一 a 
怙哓说叫「也屯发:的•-点 . 毎辟场说邰设计了两条路（两个选择>， 
怍 f 选择才会移到 t 砵场兢 & 

為 单译 f 布苺饵港个遣 
场. :兵 定故事 荈逆的 
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磨笔上阵解答 



变1驱劫敌事 

让我们杼细研究《火柴人太 H 险》 使用的两个变这两个变&对 I 1 
响应用户的决策以及根据决定前进到1/痛场鼠，均十分审要。 


\ 




decision 

用户的选 # 只冇 I 成 L 


此处 


的选梓决定了故丰的 T 齡场 





curScene « 

，前的场彔 D 场筑均有编号， 
例如 Scene I, Scene 2 等等 e 


变 i&,dec i s i on 与 eurSeene —起货贵存储用 f " 1 的决策 T 以作为故啦 
发展的根极 L 从一薛场玖到下幕场彔，这段过程均 t 复-次 f 故丰则 
随苕一个个决策 [ M 逐渐展开，一切都因语句才能完成„ 
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决策 


佴鄯分故事不见？ 


if 作1叩语句娃《火柴人人宦险》的绝作决笫引笮 ， im 



个故車6尨到此就结朵了。每祛场景都有恃定的影像与文 
宇说 明， 随授剧偖进展闲呈现。改变场景编号即足以改变 
\ m , 但对文宇说明没有助益 - 


Little house 
in the woods 


埸景图像 


场景说明 


B You h^ve a rrived at 
改 cute little hOTJiSO 
in the woods ， 


宋时，只采恥 了一个 


document .get Element Byrd f 11 Sf ： &nei.ing # ] .src = ^ scene- +- cur Scene + # .png ir ? 


在 i f /e 1 setS 句的毎个部分只能运行一段程序代码, 
你受到 U 能采取一项行动的限 制1 换句话说.卯不能 
同时呈现阐像与显示文宇说明。 
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综含你的 JavaScript 原力 

Blie 需要能在每个 if / else 语句代码出现分岔时执行多个行动。她葙 
时改变场蛩的编号 C 文字说明，接下来的两行稈汴代码才能椎动故車： 


硪*沾#密碌 
為妬选挣的 tit 聋 


document ,getKl siinfint ： Sy.Ir3(^scerieimg^) ,src 
a lert,{messag g )； 《 


^scene rf ¥ curScene +■ rf .png # ? 




尽管 JavaScriptR 允阵我们运行一段程序代码，挑战就在 T “一次做到 
好儿样丁-作 14 - 解决方案称为复合语句 （compound statement ) ，它 
把一人块代码祉起来.在:脚本屮看来就像同一段程序代妈。婴创述复 
合诂句，只黹在语句前后加上大括号 （ G ) 


ii 


f 奈语匀 






决策 



S 火柴人大冒险 S 究竞如何利 
用变盪推动故事？ 

^:在任意时间点，均由变 j 
curSc-ene 存储曳前的场素编号 D 
每幂场景則： L 珑该场景图像及说 
明.还要提供店续场素的选項，以 
洪用户二达一。史 fdecisi on 存 
锗用户的选择： I 或2 # 速择完毕 
后 + dec：i si on 社合 curScent 即 T 
判定斬场景的編 t 。 il 得史蛘细一 

点，各场景 的图像均利用 cur Scent 
值而改变，各场景的逆明則使用 
a]ert 枢呈現。 


t 为什么 ** 复合语句里包含多段 
语句 h 这点很重要呢？ 

等 t 因为 JavaScript i 吾言置 有很多 
地方以单一 iS ■句为其结拘重心，有 
点像41空公司只准谇 t 客携带两件 
行李上机的理由：只要你能家佴进 
两个行李箱没人管你到底塞了 
多少东西。复合译句有点涞登机 H 
允许我们把多段语句塞入单一"容 
器 " ，该容 S 对脚本的其他部分而 
言，宄如单一语句 。 


1^1 t 为什么复合语句未以分号结 
尾？ 

分 f 保结给单一诰句使用，复 
合语句不需要 t 所以，复合语句里 
士现的单一进句，还是需要加上分 
号,佴复合谱句本身則不需要 D 

1 $:函数是复合语句吗？ 

答 好问題！是的.没错„可能有 
人注意到了，禹 it 代码均以太括号 
围起3前，各位可以先把為数当 
成一个大士复.合请句，而 JL 可以把 
故据传八或传出。 
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磨笔上阵解答 




笔上阵 
k 解答 


里新设计《火柴入大1险》的第一个 if / dse 决策。现在 T 使用 
复合语句*同时设定场最编号与说明信扈„ 



复习要点 


使用 if 语旬，行条件地运行一段 javaSeripi 代码 & 

if 语句的条件 M 式句 T 结果必须 H 能为 true 或 
false □ 

使用 j f / else 语句，有条件地运行•或鸪段 
JavaScriptRfiii 。 


■ 使用 M 合语 句， 如运行黾一语句般运行多段 
J&vaScript 代吗， 

■ 以一对大括号 {{}) 围住多个敢一语句，即可创建 
M 合语句 t 

■ M 合痦句让 if 和句的行动部分能执行 
多项行动。 
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些 is ： 合语 句，加上 ifkls 仏《火柴人大 g 险》踏上 
成为在线互 动故半 的访一歩了 P 它有意发 M 为功 能完整 
的在线曽险 t 看来前贵不蜡 







决策树的根源 


后续的 f 险 


市阔的决策很难变成有趣的互动故年 a 但 FIlie 早有计划，她打箅加人 
史多故亊场彔，让《火柴人人罝险&的愔节更为错综复杂。众多场锐 
合起来构成了决策树 (decision tree ) ,可川千画出故丰情节的+同路 


Scene 2 


是 论用户逸择部场碘藥,.梓 
4S 攀部食專 1% Scene 1 { ^ 


Scone 


Scene 


story. 

Title IM 邝 || -> 

(故事开始） 



Fork in the I 
road I 

(火柒人上路了） I 



Little house in 
the woods 

(林同小屋） 


TaVt the path. 

(走上小径） 


4^ Take the bridge. 

' (渡过小樁 > 




射的片共译开席子介 
绍 《丈 玦人丈 S 珍》 



除了加 入更多 场景，制造新的剧愔转祈， m]ie 也创速了新的知题介绍 
幕， 准备放在 Scene 〗 前。片头场景 Scene 0比较特殊，无论我们选择 
I 成 2. 都会导向 Scene L 换句话说 ， Scene 0不是故事的分支点，只 
是开场的片久 - 。新的剧情 慕匀 开场 幕 W MhUp : // www . headjirstlahs.comf 
books/hfjs 下数* 


152 第 4 章 


Download at http://www.pin5i.com/ 


Scene 8 


令 






如果只用 if / else 语句，《火柴 A 大冒险》的决 策树会 是什么 样予？ 
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我不知 道 ……栗看状况决定 


if/else 制逯出阶梯式决策树 


虽然《火柴人大宵险》决策树取的每个决笛点都只有两个选项，但 
Ellie 知道后统的每项决策都与的面的决策有关，例如 T 想进入 
Scene 5的情节， 用户必 须遵捆特定路线： 


If iicur$^en« Is 2) 

If {decision is 1> 
Jump to Scene 4 





If (curS^ene fs 4)i 
If (decision is 1) 
Jump to Scene S 
EIk* 

Jump to Qc « ii # 9 



知道用户的选择还不足以决定下个场：。 miit 也忠要把当前这一薛的 
愔节纳人考进，使用多个 if / elsc 语句，先拾査目前的 场钕編 [ 4_,再根 
据用户的决策而行动——这边方案之…，但阶梯汊的决策将使 if M 
包荇另 ，个 if , W 另一个 if ……似乎垃种奇怪的想法 6 

旮起来好俛很奇怪，但我们 ; F .常也会作阶梯式决策啊 [" 你想加点一 
份背条吗？ H 这个问题很少跟在点/牛菜色拉后出现，对不对？ 

条 M 题_根据前 一令问 题的答案而出现，例如“我要一个奶酪汉 m p 。 
这就娃阶梯式决策的例子，囚为 要背条 吗？ M 取决 T - fT - 令 N 题 
“耍点 奶骼汉堡或色拉？”的答窠。 
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决策 


if 可认故在别的 if 里 


^ JavaScript 4( T 把 if 放在另一个 ifM 
完全合法。但请圮得，： if 语句仍只是访 
句， RM 作为另个 iE 语句的 G 动工具。 
换句话说，问题4以抟在兒一个问 M 后， 
这种 if 放在另一个 it 电的语句，称为嵌 
套 if 语句 （nestedifstatemem ) □ 


it (order *cheeeeburger" 

二 、 if iwantFries) 

^ ^iti% Si F. ^ order +■= 

的 d 1 

cue ■ 时才 €| 技 H — ^slse if (order -- 11 salad") 
M if ( w^ntFruiitl 

^ order +- # fruit ^； 

1 T 

— ot<irj + ... 的阇英 74 .. 这样輪出 
碣稟圬士是■老起乌木杲 ■'线 ^# 



请为《火柴人大旨险》的 Scene 0与 Scent r 设计决策代码, 
并确认于必要的时机使用 if 和 ff / eJse 语句。 
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歴笔上阵解答 





请为 《火 柴人大旨裣&的 Scene 0与 Scene 1设计决策代码， 
并话确认干必要的时机使用 if 和 if/ e f Se 语句 E 


f 的铋署 
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决策 


蚤数掌控你的网荧 

《火柴人大冒险》网鼓的按钮（丫 s y ) ，就腳户 府往故 
丰 < f 幕场漠的方式-当用户决定桉下某个按钮时， changeScenen ^ 
数即获得调用，并根据按铕代表的选择而 換保。 



£ynction ch^ngeScen^(opt ion) { 


</s-cript:> 

</head> 

< body > 

cdiv styles "Tmargin-1op 1 10Opx ； tQxt-aligtiscenter # 
<img id-usceneimg 1 " 1 src- ^scenel. png u alt - ^St ic] 
Please chaose ： 

<input type-^button H id= ^decision1 〃 value= # 1_ 
<input type-"button 11 id^^deci5101^2^ value- ir 2" 
</div> 

<ybody> 

</html> 


A wgescene U 承数接收 ㈣ 一参数 . 就 ㈣ 户 的选择 
(“ 1 " 或 " 2 ” >。 函数 R 需黉这个怙息就能改变场罟*特別 


两芾 i 耷并个斿邙 ■■ 用彳決 
定 盎攀的 下蓽译 I 。 


益处理三项 T. 作的 changeScene U 函数 : 


设定变适 c . urSce . ne 为 卜 - 称场辰的'编^ □ 

设定变法 message 为 T 堪场或的文丰说明® 

0根据变话 curScene 改变场迓的图像，井呈现■文 
^字说明。 


§前位黃^ I 57 
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假的、虎拟的……什么? 


利禺伪代码规划 1 险藍 ® 

对 1 f 如何以 JavaScript 代网逑立 兩数， 从而灾现《火柴人人 H 险》的决 
策 树， EI!ieB 经很有槪念但这么多决笫可能使得实际编程时一闭酕钆，有时候 t 先 
川伪代码写下决策树也娃个有益的丁-法 。 mm ( pseudocode ) 娃种较不严渑，较易阅 
读， 也蛙非常+止义的脚本代吗及达方式，占畋仿代码后， JavaScript 代码将虹为诘晰易 
情.编码时也较少产生错 i 吳。 


■e_A #i 


§个悚凓的 d / dw 诂 
句表承1不啤味 


虹 H 访 


夕 If (curSc«n« l» Q) <T - 

Jump to Scene 1 
Set Scene 1 message 





S^t Scene 2 nnes&ag|e 
El$e 

Jump to Scene 3 
Set Scene 3 message 

Et «» If ( cur^cvnv Ea 2 ) 々 



UttJe hocpse 
l*i the 
woodj 


Y 犮有•问铯 

~ 有蠢(砸 


P 5 ) ^ 伪代码看起来很像 JavaScript 代码。 为何 多此一 
举啊？ 

^ :不做铐代码也没关系 t 我们的用意是想把复杂的 
过毡 决策树转换为 JavaScript 代码的过裎予以同 
化，同时又把制造错误的风险降刻最底 t 归为伪代码 
的细节；?:如真正的 JavaScript 代码烊冬，所以我们 T 以 
先把精力放在每暮场素连接时的逻辑上，而不用分心 
这意大括号和分号的位直是荅正确 n 等你熟悉伪代码 


后，将之转接为 JavaScript 代码其实相当轻而易举。 

:制作嵌查^语词时，一定要用大括号吗？ 

答」_不一定。亨实上 t 如果只要在 if 语句里塞入另 
一个 if 语句、而不包括其他代码，的确可以不加上大 
括号，因为此时在技禾上不需餐 I 合语句.不过，若 

是复杂的嵌套 if 诰句，使用大拓兮則会带来清楚表示 
嵌合姑构的优烀（帥使并非严格需要 } 。 
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决箫 



JavaScript 冰葙礤锇 

火荣人大冒险》的 changeEcenef} 
页的决策树。对 7 ,有些场 罟决策 传:不 


(curScene == 3) { 

■… （option == 1) { 

cur Scene = 

message - ^Sorry t a troll lives on the other side of Che bridge and you 
w just became his lunch, 1 "; 


document B g et Element By Id { ^ sceneicrig^) .src 
alert (message}; 
















JavaScript 冰箱班铁解苔 



JavaScript 冰葙磁铁皞答 


======:，有==『 


function ch ^ ngeScene ( opcion ) 
var message = "■； 




KcurSc ene =- 0> { 
curScene = | 1 | 
message = journey begins at a fork in the road. a ; 


1 

if 

ene 


(curScene == 3) 
n 


== 1) 1 


message = " buti ' y r a troll lives on the other side of the bridge and you J 
# just became bis lunch ，,； 


I elae I' 


e 


message 


Sr 


star-e i.s interrupted l?y the arrival o£ a huge troll 


I alas |T 


curScene 


curScene 二二 4) 
1 ) { 


I elseb 


message 




yov became jp^rt of t'he witch's stew ，； 


docuKient J getElementById{^sceneiing rt ) .src - -scenc^ t cur Scene + # .png "： 
alert (messaged; 
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决策 


S 套上火柴人的 f 险旅程 

S 火柴人大3险 S 的軻本 现己反映整个决策树> 我们可以 
蛄 .匕几段不同 路线, 体验故 車„ 举例 来说： 
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留白 

火柴人不乎衡 

擠糕， Ellk 的《火柴人 AW 险9 ti 红遇到了昀题。他拜托朋女们帮 
忙测试刚做好 的几贝 故事， 结果， 不少人遇到了没有任何怙息的窗 
LU 这个 “幽灵窗 □” H 在 h— 场胃险结朿，准备軍新开始新冒险 
时出现。所以问题出在从其他幕稃向 Scci^o 的时候„ 






W^lcoMe fo 

STICK FIGURE 

AD 卿 thpc 


豳足穿 c ? 来起倉 
M 仞作 J6? 




』 J_(i 


调丧结果发现.只打两幕场这能通向 Scene (): Scene S L ^jScene 6 ^因为这两 
薜都是故丰的结局 T 走到结局后,能够从头开始—— l ° J¥UScene 0 ——才 
贳合理。所以 EMie 在 change Scene U 函钕屮另外处理这两个场景导囲 
Scene 0 的部分 * 


else if {cnrScene 


5} { 



s«»，5 寿 S«h* 6f§f；a ^ J £ -f 
C4f SfTfPtf , fE if 未公戌 £ 

^ = 


虽然在这么简申-的代四巾 ■# 不出什么，但如果右 # changeScene () 函 
数黾底端的处理场跤阁像改变 G 呈现场蛩说明文卞的部分…… 


空的 alert 輻我 
宇愿 1 S 完全不 会出琛 。 


o 


0 


document 」 gcfl:.Llcmen 匕 By 丄 d< ^ scene img ff ). sre 
alert(messageh 

i 存辞子 

企 $ $ 。 


f scene 


curScene 


_ png ■ 
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决策 


卜嚙，我浚布仔么能罟诉你 


《火 柴人太胃险》代码的问趙，在 T 它必定呈现毎幕场戚的说明 
文字与 akrl 框，就薜没有信息供呈现，如 t 新由 ScueO 开始胃 
险时的情况 5 不过 T 该如何检査变 Mi^ssage 是否存储 f 情节的 
文字说明呢？ 



^ 6, H 蟋$郝蜮 

这 个争件 判定 



解决方案忠要在弹出 Art 根前枪查饿垃否为空字 符串卜 ") n 
换句话说，只在 message 变贵小'等 T (not equal ) 空宇符串时， 才呈 
视 alerts : 。没锚，听起来好诹是个退步的解决方式，但〖肖记得，现在的 
状况需要一个 t me / false 测试 .以 判断是 否呈. 现 akrt ^ B 

相等运算符 （==) 用于检査两项車物是否相等，不相等运算符 （!=) 则 
可检査两项丰 物是否 不相等， 


G) 


alert (""Thankfijlly, you haven^t been c^aten tjy the troll 



笔上阵 


该为《火柴人大冒险》垂新编写弹出 dert 框（及每幕场条说明 
文宇 } 的代码，这一次只在 message 变量确 实存有文本数 据时. 
才呈现 alert 框。 
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展笔上 阵解筈 


Inequality 

<不相等） 


SP in : 



Equality 
( 相等） 



扣 I K 卑子！ f , SP ^6 t-me ■ 

$' C'J . ^ 
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JavaScript 的运算符 （ operator ), 例 
如 这呰比较运算符，可用于违立表达 


式 ( expression ) 


-块垴终结合成 


单一值的 hvaSerip 【代码 D 表达式山产 
生 boolean fit ( true / false ) 的比较运算 
符组成，囚而适合构造使用 if/else 
语句的决策逻辑。 




注意！ 


=与==非常不一样 & 

在比玟两个值前，务必确认你使用 r == ，舟 
非=，否則将 雯成指派数诚 值，有可能建立任 
何全新，爪寻常的彳 i 序错误6 


Negatiow 

(荣定） 


Ussthanore(f(/aIto 

《小子 等子) 


Greater than or equal to 
(大子军子 > 


如果 xf^htse 


X <： 


^( jis ? ； 


如萆！ （ ■> 子 |f 号 JK 印的 ㈣ 其 
㈣ .^ 


X > 


如 I ，丈子 * ^ j ,, ffP 
f6 ^ue： ^ |[) „ ib Utsa B 


+ F 1 等与不枳等运笕符，史们在 hvaScHpt 代码 .■ 违立 条件测忒，也是 作决策的好 ^ ^ t 

帮手 + m 能 够助你 一 n 之力的比较运算符不只它 们两个 而已哦！ 4. 


餃迗 I 符鞲心制作的决第成品 


《上解阵答 


只旮 S 含 A 空 
亏苟莩的 i 本的，争 
4 f ) 断为 ifS in 


话为 《火 柴人大 旨险》 垂新编写弹出 alert 框 （及 每弗场罟说明 
文字） 的代码，这一次只在 messoge 变婕确实存令文本数据时 t 
^、 才呈现 der + tl D 

li A bJbJ I. II li II ■ J ■■ ■• h d ■■ J ■■ ■ B J BJhJ b ■ ■ ■ a .1 ■ I ■ ■ ■ ■ 钃 ■.■■■■! ■■aba LJI.il L ■ b li B a B J ■JKJ h d B ■ ■ lb,I ■疆 hBI 疆 ■ ■ ■ .1 b d I. d I. d I. J 1. ^ bdbj m Jl m. J m J i. J b 

alert ( message }; 

■ iririiiiigieiPiaiBiBi -*■ ■ r f r n ■ ■ r ■ r i r ^ p ^ p i p i r 1 p ■« p i tiei r i e ■! p i b i ■ i ■ i ■ ■! e t ■iBrirHiqriiriirir 瑁 



H* 3i ff 
如 f 

X 
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蠢離 


决策 


为什么否定运算符只用到一个值？ 

等:大多教比较运算符需要两个铋，这5定运算符 
只需要一个„它的工作也很同单：反转运算符的意义。 
所以， true 变成 false ， £alse r J true 0 

^ ： 我看过否定运算符应用于并非进行比较运算的值。 
这一切如何运作？ 

答： 于非比较运算中，使用旮定运算符的代码，其 
实巧妙利用 'f JavaScript 判新值是否为 【 rue 的细部设 
定。如果在预期为比皎运厍的猜境中使用了非比較值， 


只要;?：是 null 、 I 空字符串 （- .，），或 1 ■未定义"， 
任何 ( E 都会敌辭读为 true 。 掩句话诜 ,从比较运算的 
观点来看，数据的出现就代表 urue ， 所以.当你着到呑 
定运算符用于非比校运舁値时， null , 0. ”的意义均 
反转为 true s 其他值则被反转为 £ alse D 

闲. 等一下 * nul】 是何方神圣？ 

: mill 是个特殊的 JavaScripi i£ T 表 ，示“ 缺少 
麩掂 h w 在对象的情境中比较 S 务过解，所以等到 
黾9章与系]0章再来讨*吧！ 
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l^e t 
quote 


SCLssors 


Rock, Paper 


下例代码能呈现畎给《火柴人大_险&的正面鼓勐信息。 a . b . c , d 各应为什么值, 


適 才能成功写出 fg 息呢？ 


；Ise { 

quote += ^realiy hac . es 11 ; 


t V-d) { 

quote *■= “Stick Figure"; 


yuoi e 


alertiquote ^ "Adventure^)? 


[ia 10) 

quote += w 50 !ne guy "； 

lse 

quote ； 

£ (b == ^ 

if (c < (b / 

quote -<-= n ^on r t care fox^: 

else it (c 5^= (b f 5J) 

quote += # can"t rcm ^ iv ； ber * f ; 

else 

quote += "love" 1 ? 














习躅解苔 



注释> 占饺符、说硝文档 

《火 柴人大肖险》也垃脚本稈汴里其有未完成代码的好例子，因为这个故 
赛还没说完。例如 Scene S 与 Scene 9 都是 11 待续 H ，等着 Ellie 提出更多创意, 
如果可以标明这个地方有来完成的代码就奸 T , 这样才不会忘 idta 后补充 
細节 4 JavaScript 的注释 ( cornrnenO 即可在代码里加上 fjiH 完全不会影 
响程序运行， 


;i 鞾的始方式巧 
—对糾钱 //. 


+■ 


注释句為 f £ 问文本 _ . 
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下例代码能圼现献给《火柴人大1险》的正面鼓励佶患， 请问 h a , b 、 c 、 d 各应为什么值, 


var quote 


雀缗華乎 ro 


if . {a !=即 y ^***"* 

quote += "Some guy 1 *； 

else -^-^***^ 

quote += ^ 

it (b ta * m J 

if {c < {W 61 i 

quote +- # < 3 on J t oaXC ； 

else if (c >^= (b / 5)1 

^uots +: a can r t fg - snscnbeT " f 

else 

quote += CoW ; 

> 

e-lse i 

quote -t= # teally haites ; 


t 攻味年 
今 10 乂 3 


d ^ fal “ 


SJ ) fJ , 4 ntiKt ， 




if { td ) { 

quote Stick Figure -; ^ 

} 

else t ■ 

quote -Rock, Paper, Scissors ； 

> 

alertfqucte + ^AdvetntureL - ); 


9qvc Stick Figure Advcnlurd 1 






才能成功写出佶息呢? 









决策 


JavaScript 的注藓吆//起飽 


注杼以纟/起始，延伸■的结尾。创迠注释作为占位符时，只耑在斜 
线后注记还有疋多程序代码待补， 

^CAfHI i 


略达 


else if (curscene =- 
// TO BE CONTINUED 

else it (curScene -- 


~ > // TO BE COWTIWUed 

) 




让释不只 4 m 干占位 t 其实史常制作埕序代蚂的说明、使探序史 
有组织 E 容易了解，现在知逬芘段杩序代妈的用途，不代友以后一庇 
郎 id 得史的闭途，而 a 可能将 Fti 其他人接管你 设卟 的秤序代码„事 
先说明程序的用途，对人家都冇好处， 



这段 4 岈迮明£署的 


// Initialize the current 
var curScene = 0 ? 


scene to Scene D (Intro) 


变 M curScene 的初始化， | S 1 为有了详细的汴杼而显得更洁相 
似的注释邛 JF 1 十淸楚说明变 tiUiessage 的屻始化。 


// Clear the scene message 
var message - " M ； 



A -： fc , : i 结淆 (# 3Js^. 
这 4 代铒的用淦。 


如果你盂要跨越多行的注释 + 也叶以 创迚多行迚籽。 


^ H it 待免 

^ A ik. 

单行注释吆//起 
始，多行注#則 
用广乌 V © 起来。 



Mor& comment 


多竹湩冉每 

V/. */ fi % □ 



多行注释想冇多长，就可冇多长. H 需以/*起始 
并以 ■*/ 拮尾 s 


/* All three of these lines of code are one 
big comment., Seriously x Im not kidding. 

No joke # this is still part of the comment. */ 
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变 S 该放在何处 



f - T * 注藉哺采含 
含 3. 佴戰找不诔苺 eur^ceH 色和 
味 e « a 呎为什么釗迮在不尚焯方。这躉 
付么埴 J 3? 


CUiSc^ne^j 逋旮 



在康的 ，:. 


交夤的 …… H 地点，重点就是 M 点 

在 JavaScript 的叶界电，地点就像现实世界的房地产—样里要;^在《火柴 

人太馳》的范齡 T 变 M 创勵 ㈣ 舞换句话说， curscen^if 

逮在 changeSceneO 函教外, mesaage 却创建在间-函数内，这并非意外 

原臟 f 作賴 ( Scopc} ,細 iT ■魏财命卿 t Hi 補序代阳4 
以访问变铯的 时间， ^ 
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决策 



在 JavaScript 里,作用域 ( scope ) 代表 数据的上下文 (context of data ) _ 
例如数据生存的地点以及 lij 向数裾的方式。根据作用域的不间 T 冇些数 
据能被脚本的其他部分卷到 T 但有呰数据则 只限 某块代码使用，例如某 
个喊数 - 下例就是两个生佯在不同地点的变迓： 


furicx ion 
var V ； 


在这段范例代码中， x 称为全局变 ft (global variable ) P 因为它创 
违在任何函数或 Jt 他程序代码块外.因此能被秸份脚 本哲到 t E-E 
耍的-点 + 只耍脚本正在运行， x 都还 M 活若” a my 不像 x , 它 
是个局部变 S (local variable ) ,这个变 f 的可见度只限「 - 兩 
数 doSomething () 还有， y 只 ■ F-doScmething U 函数运行时“存 
在” 一当函数运行时，¥被创建 . 函数结束时它则被摧毁。 


U 前孴来还不错，不过， doSor.ething (:■的参数 z 又处干什么位菁？从 
结采而言，函数#数的行为就像 ti 经初始化的屁部变里。所以 t 2的 
作用域与 y 的相同 T 只能从函数内 访问。 


士兩釗 ft 成鴻粒。 


数据可见度诚「_ “有盍要才要知道”的知识，也就是说只要可能，你 
郤应该限制访问的程度。这有助 T - 预防数据怠外被不该访问它的代码改 
变。換成实践用 H 就适尽可能使用局部变 Ah 
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在各个地方的目睑 


何__的全敗如園 ㈣ 看 贼 am 娜的 
现在 更能理解变旬 [为 何创建 在不問 地方 J ° 



<script type^text/javascript.* > 

// Initialize the current scene to Scene 0 (Intro) 

var cu^seerie = 0 ; - 〆 


£ ； 5 ； 3 feLl ^-"# eS£ * tte0 ^ 


funct ion changeSceneidecisioni' 
// ciear the scene message 

> var message = IM, j ■ 


if (curScene -= □) { 
curScene =： 1； 

message = 11 Your journey begins at a fork in the road 


You are standiriQ on the bridge 


_ 在于祥 在冰 ㈣ 咖咖 o mm 

数__ 喊邮 e 变計分 mi 不娜 J ㈣ 

curscen .^ i^else 购齡料局: 

__数调腦_这个变^底线 ： 咖刪 e 可创建 为局贼 

纛，但本例的 curScene ffi 为全局 变置。 
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决策 



如果作川域的概念边是 iL 你有点阑感，成 i 午， 把脚本的各个部分 
气成数据可在儿中生活.『彳给 A 足的 K 域会仃点 柄助。 以 《火柴 
人大 n 险》为例, 脚本中就有好 几个可用千存储数据 的作用域， 


金妾 /' 味 
的1滯蝤 


c hnn^Sctr,eO& & 


目前位 S 


局部与全局娈捃而对面 



今晚 主题： 局部变疆与全局变漏针对帮数据找家一事, 
讨论地点的重要性 


局部变蠆 

我发现只专心希待自己岗围的环境还蛮有 m 的， 
唭实上，我根本没办祛说出我的邻居家发生 nh 
么丰，不过我喜欢这种感觉。 


全局变量 


老兄 T 你真应该扩展一下世界观出门来趟小旅 
行，看下抑本壯界的 K 他地方。 


听起来很诱人， m 我冉欢舒适 窄阅的 安仝性 t 气 
我悠闲地待在滅 m , 我知道外羿没有人能够打扰 

或 I 午如此。但你知道吗？从脚本揆式的仝局•看來, 
、 你的小小生活实在无足较每次蒞发你的小世 

界，你就随之创迁，恨4、需耍时，你也跟着被摧 
毁，而我仍在此屹立不摇只耍脚本存在，我就 
存在 * 

噢！轮回转 世啊！ 我不太确定是否泫相信，似在 
存储数据这方面，我完全和 你一样 方便。我只是 

没有 p 用.全世界前来邓 it 的较好吧。 a 承认冇时蚊我是被误用或滥用了那么几 

次， m 是我有不畏艰难险阻，始终紧握巷值的优 
点，这样应 该可以 平衡缺点了。当脚本偌要一块 
总是1己得 a 己的值而且随时可取用的数据时，也 
们就谲赵找我了， 

至于需要对某部分代码维持某些信息的隐秘性时， 

脚本就会来找我，因为我很 ft 得保密防谍^ 

听來+锚，不过我毎天都把 s ] 得性和持久性看洱 
比險私更1耍. 

所以大家都觉得我们很好用 u 
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i 如果在注释里放 T 真正的因为注释不是一 fthvitkripl 會：或许是^ II 前的 JavaScript 
JavaScript 代码，会发生什么事？ 语句，注释是种标示、用 途伩跟 版本 ( 1 . 7 ) 对变 f 并不支持真正的 

什么都不会 发生！ javaScripi 于叙事' 或提洪关于代码的附加信局部作用域，而是支持基致作用域 
轵释器 完全苹 略; - i 峰，任何放入洼息，有点像书中的3脚 1 重点就是 (function scope ) ,也就是说 + 某 
怿的内容、 i 解^器^行脚本时 i 记得 JavaScript 解释 E 忽略所有注个必數内的定量被现为该及数内的 
会被忽七知道了这一点，注_择一注释乃为人矣而存在 ，并昨 而部变 - u 是，戶.杷变責定到复 
可于追椋柯題或尝试不同的编码策为 r ^存在。 合 " iS ■句里 ■ 它不会自功4十说部作 

略时 T If 时停 Jl 某段從序代躺: .4 ■问；在创建全局变里时 T —脚本 ji 輯 a 的 JavaScript 或将 ㈣ 这 

动„ 次— 又是什么意思? 种 H Mst 

,>* ^ 在函敫内的史受为局部的，其他均 

判： 一 行 JavaScript 代码结束后 T 舍： “脚 本层次 。 (script level ) 为全局的。 

可以在它后面加上单行注释吗？ 是脚本的蔹上层，就在 < S cript > 岛 棟田播 m 

红史取 . ^ s ， / 1 J :作用域，流 fe ( flow ) ，执 n 

纟，一这_局部或全麟 ft 有关的东 

j , ; 听起来真是够复杂屬很难 

的笋物均被视为全易的，也就是浼 ， ^ 

任河 创建在 41 脚彖层次”的亨物< 等:不会 =■ 重点只要记得：肩部变 

_ 生命埤期与脚表一蛘，而且能被任黃即足以存谜皙时信！ <即不需用 

为什么注释不需以分号表示结何网宽内的代码访间于在数或其他代码块的佶息>，如 

闲.果你需要敕据在脚本的生命 辛一直 

L ㈣ 11 存在 * t 设定为舍局变有一点 

置，匕是周 nr)W 牵吗？ « ：, f ^ i JV Ri, J，，V i ^ 


^ : T 此时，代码一样会运 
行， 因为它不是注释里的一部分。 
单行洼释不需要占据一 g 仟 这 
释 K 是从//到该行練尾1如晃"出现 
在代码后，代码仍会运疔 D 




束？ 


令局变证创 it 于_本层次，超越仔何函数或其他代 
H 块，而乱在脚本的终生都会4件1 


局郛变 M 创迮（和襯毁）于代 B 坱内 ， M 能在该代 
码内被访问, 


使 HI — 对斜线（⑴起始单行注释 ■= 


我们比较诖议使用跖部变&, S 为它们的访问权受 
到较严格的抟制， 


目前位 S 



丰亩的选择 


5个选释 

还记 焊我们的游戏参棵者 Erk 吗？他急忙吃完紺甜 
m , 豢加下一轮《全民 m 掊乐》 u 问题是，他现在尚 
对作 常冇桃战件的找抟……他必须从5个箝 f _ M 选一 
个。 




你会如何设详一个牵涉到 5 个不 同选项的 
JavaScript 代码？ 
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决策 



5个选项 

^ 1：^：] M 然 if / else 语句原念在于两物的选择，但萤备好几 
个 if / el ae 的眹套语句，就能在任意多个选项中选择了„ 


i£ (clios enCase -- H A H ) 
openCaeet U ; 

else if (chosenC&ee == tf B H ) 
openCa 


else i £ (chosenCase -- ^ c M ) 


&伶代鉍 fi 违咔4忌_个 
葙子吋，袅个 H 部攻碑 
fi . * f ± 丨太 奄边库 - 



openCaae < M C , I J ； 
else if (choaeaCase 
openCa Be ( Jt D w )j 
else if (iChoaenCas^ 
opanCaise (^ r E w ); 


X = 


== tr E n ) 


嵌套的 if / else 可能耷得太复杂 

嵌迗的 if / elsetfj 句的研|4行……似效率有点差 》 因为 if / 
else 语句并非为 r 超过两个选择的状况而设 iK 原因嘛……你 
想想耍经过多少次 bcmleari 测试 T 才能选择 E 箱就知道1% 5项 
条件郎需评怙，实在不太有效串。 
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希望 t 期盼，终至选抟 
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决策 


switch 语句能®很多“箱孑 M 

JavaScript 打个多萤选项钐用的决策语句 D 觭面提剑的 if / else 适合在 
两样 事物间：选 而 switch/case 语句則让我们能 作许多亊物糾 冇 
效率地多选一。让_我们一间从 swit c : h/ca se 的角度观看 Eric 過到的困 
垵。 


Smack / CAfC 的 
"cast " r g 7 . 
A Erie 
的寻 M 荈,， 



* 个巧钝沍 
畔 ip 铒箋钱 

个 case ? 


switch (chosenCase) { 


case 



openCaset ^ A -7 )； 


break ； 


case 


opencaee {^ B " Jj 
break; 




cspeinCasem ; 


break ； 


case ^D ( 


open€ase{^D ,J, )； 


break ； 


case u W f t 


openCa.se 

break ； 


switch/ease 语匂有 
故率 M 在两个认上 
选顼的状況中作决 
定。 


緙的萼拔箱 

H ： amitch/eafieii 

f 的相料作.6 = 


6 刼砷分的代砝 .£ 
尨诠 ft 扣在栌 cwd # 
句下， 



4采*个違颂时 —宏 
鬵诸旬. 片鯓 aj 
碑章 Witch/CAte-4 ^ . 


sm ccA / e * Jtf # 句的辖构 it 
沭 九智 I 含洁勻。 



switch / cdse 语句可以达成 i JVelse 语句的任柯 功能。 掄猜#,这是車实或虚构？ 


□事实 


□ 虚构 
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switching 行动 





swiLch / czase 语句可以达成 if / Wse 语句的任何功 搞猜宥 T 这是寧实或虚构？ 

□事实 构 

不像 if / else T 控制 swi tich / caRft 语句的 
检测数据，不可为运算式一■必须是一段卑 
纯的数据。 


在 switch 语句中 

见识过 switeh / case 诂句的行动1「?，接 K 宋分析这个语句的一皎格式, 


a 


Test d^ta 


Q + □ 



a 个 # 策分 i 构 

w. ^ 

后馗匹 *£ 嗥則 


_^ 


⑵ r / 二二二 




S 个 ESSt 刮的铎嚷 
年- #0 分*. 






6 ⑽ k 译旬 避秃这 H 蚵滅姑 4 被 
分 ttt 伐埤 代坞。 


这用的 " detail " 
ffe 含栌伎淳代砝.子 


Statement 


□ 




CD 


為其®起 > 
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决策 



switch / case 语句： 换你写 M 薄 

例建 switcli / casel ^ 句的确比创建 if/else 语句需要更多工作,何在 
处理两个以 h 的结聚时，前者比 较冇效 平-以>_为过程： 


以括号闹起测试数据 (test dam ) ,讣； T ■始一段踅 


设计 K 配案例 ( match ) 时运行的语句 ( sLalcmcnt ) a 
这邡分可以是很多行代 fil —一小见洱盂为远合语句。 


可选择 彳1 入默认分支 ( default ) , ^ f - 没有西 
妃友例的状況 


H 每个 case 的匹配案例都只会对应 
至某个测试数据而巳吗？ 

^ ： 是的 a 此时妁楗念是以变殳作为测 
试 ft 据，然后 漫用字 面值与 Efe 業柯相 
比蚊 n 


:所以说 T switch/ca sb 语句并非 
利用 true/false 运算作决定 fl 罗？ 


:如果不在 switch / case 语句中加上 
break 语句 t 会发生什么事？ 


贪： T 能发生 t 外珀栗哦！ break 语 
句具有区問 switch / case 语句中每段行 
动代越的功用 《 ')' T break if + 所有 
行动代码将如一大块代鸪般运行，如此 
便夫去了不柯决裏的用意 c 在 swiLch / 
case 语句中找到匹紀 f 例时，即运仟钿 
应 caseT 的代码+直到遇兒 break 达句 
为止 c 此时，才会离开 swi tch/crase 语 


^ ® » 为免代码意外运行, 
请在每个相应的 swi tch/case 
后加上 breaki 吾句 。 







switch mtt 指 M 



本周主题 
行动者、 


Headfirst ：欢迎你今天来上我们的节目 I 如果要 
用一个 W 来瑕容你自己，你会选什么 U 】 呢？ 

Switch ； 挑剔 ( choosy ) , 

H ^ dFint ： ^……能+能解释得 E 详细一点？ 

Switch ； 我让 11 在许多项 U 间作选杼^ 1 一爭成 
虽然有苎情况只忠要敢纯的 Tt ] 二分法决 
定,但有更多状况爾要…… 嗯““差 别较为细致 
的选项，此时就轮到我上场 f D 

HcadKirstj 似太家都说 If 能做到 扣同 的工作 s _ 
要的代码甚至史少一点， 

Switch ; 成1 午是这样没错.只耍敲得够久，川植 
r - 也能敕断木失啊。就个人而#，我觉得川锯 f 
比较奸^ 其实， 每令人都有 gb 的专长，我的专 
艮躭足冇效率地在 i 午多不同 电物 叫作选择。我片- 
不 im if , 但他比较适合不同丁-作， 

Headfirst : 你提到了效告诉我们,效率在你 
的工作里扮故什么角色？ 

Switch : 嗯，我的构造15: _「-报据数识值作决策， 
而我的 I ：作只垃拿数裾与 对能的 选择相比对，决 
定该运行哪 -- 段代码 fl 只是 这样而 d 。 找不六烦 
恼评佔表达昃的问题、我也不滞为广从作多 HJ 能 
结淞中作决策,而利用嵌套的语句或其他花哨乎 
段，如果打览枨据1个数据快速决策，找就足你 
敁奸的朋友！ 

HeaaFirsti 我们来聊一下你的好朋灰—— Break n 
没有他的 i £_, 听说你的0常工作将无法结束？ 
Switch : 确实如 此。没有 Break t 我的 麻他就 
大1%没冇他，我将无法分隔不同段的行动代 


决定者 

码„ Bmak 让我知 逍哪段 代码已经结束运行，我 '< 
以结束工作.不会意外地运行其他代码。 

HcadFirst : 原来如 此 a C a se 呢？他也是跟你关系 
很亲近的好朋友.对不对？ 

Switch : 当然了 a Case 和我的关系很密切 t 主要 
在子 Case 告诉我 所有畸 能的选择。没有 Caw , 
我就失太了作决策的 基础。 

HeadFirit , 这么说宋 -， Case 呈现可能的 匹紀粜 
例， 你_利用匹配的衮例,决定该做什么亊。不 
测比数据如果没找到叩.配案例该怎么办？ 

Switch : 有状况 ^ 如果没有特别处理“无符合宠 
例”的代码 . 讣么都不会发生 • 不过，权还有个 
好朋友 Default 可以在 w 元四|£ 案例" 时运行恃 
定代码。 

HcadFirst ； n ± 4 我倒是不知逍■这么回 
Default 与 Case 的相处情形如何？ 

Switch ： ii 不错， [;. 他们不会抢符曝先 
率，也不衾砭犯时方的地盘 ■: Case 处理所有匹 
rtil 案洌的书项 、 Default _处现没有 PE . 紀案闸 
时的状况，偷倫跟你讲 k 我想 Case Jt 实很商兴- 
ti Dcfautt 的帮忙，调为它很不会处邱没有匹 HIM 
例的状况, 

H cadFirs t ;哦 t 我 f 解 f n 苕来我们的时 ( P ] 也快 
到了， 你还想扑纪什么吗？ 

switch , m ■■… 迟疑不决是接檜糕的亊,没人與 
坎含糊其辟的京伙 B 外面有很多种"了能性，不表 
示你必须举手投降 ， 调 m 我，我会尽一切可能帑 
你作⑴ 对脚本妯冇利的决笫。 
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请转換 《火 柴人大 冒险》 前两苒场呆的代码，让它们使用 
switch / case 语句取代 ff / dse 语句 。 
























请转换4火柴人大1险》前两再 场聚的 代码，让它们使用 swftch / 
case 语句取代 tf / else 送句^ 


d T 尨邊用 
的原碚杈 


毯下牵的诔 . If 也呆 
m 枪 HU 构。 


ihe^sage 隹 "Vau are itamdriiQ on the bridge overtaking a pssicef^ ^-tr^sun 
























决策 


switch 蚯大柴人大 f 险:试用 

完棱地 t 新编写过《火柴人大苜险》的决策逻辑沿， E ] lk 真的很想##结 
果,如果你走 遍 故事流程,两者的差別很快就会看出来 …… 晤…… 





膂一下，一切#来邸一样 1 因为 swUch/case 语彳 ij 对《火柒人大 P 
m 的改变， 只影 响了代码的结果，而不沾莹现的外观,这是个代 
朽的改变咻纯发十.在幕后的范例……彻头彻/ I 地只在 w 崧后”！ 


^Je\cOt^£ to 

STICK FIGURE 

M ) VEW 丁账 



to either 

itart '" 
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故事如何结束 V 



故蓽螓 续…… 

《火 柴人大1险》其实方刚开始。它需要富有 
创意的说故亊方戊 Y 关于火柴人的阐画与许多 
JavaScript 代码 + 才能成为有趣的在线程序，抟 

T 来你会怎么做呢？ , 

Scene 7 


Sc^ne 


现在的 ffl 本逄不箝， 
不杖鼓泔希布人 除瓚我 
加上翬多蓴 1大锒人夂嚷 
拎> 的惰节。 


Scene ? 


THE WV 


Scene 


Scene 9 


Scerts S 
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决策 



JavaScript 塙字游戏 

来点简单的决策吧1现在休息一下，玩一盘填字游戏如 
何？来吧丨 



横向提示 

先写下_能让设计复杂的 JavaScript 代码史客易。 

4, 一种能坍于说明代码的东西， 

5, il 类涪句实际由许多语句组成 ， 

6, 当茱个 if 谙句 X 于巧一个 if 语句中时，称为 

8. !=适算符用于测试_, 

JO . 利用_有助于把1杂决策视觉化。 

n . 矣份抑本都可访问这类变 


纵向提示 

2. 做这件亨，_做另一件事 D 

3. 这类运算符的结果为 true / fahe . 

4. 当代码是部分 if / e!se 浯句时的运作方式 fl 
7. 可根描一段数 据的忮 作决策的语句 

9, 作用域受限的吏受. 

1 L 这种浯句让我们有条件地运行一段代码， 

]2.在 swiich 语句下的每个决5£分支郝有一个 


A 
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JavaScript 填字游戏蘚答 
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决策 



请垂直对折本页，槙拟左 
右脑的区分，井解决我们 
提出的谜团， 



Page Bender 


岜 lf / else 还不够的时 ft 







虽然 if / dse 语句非常方便， 

但还 是有其皞制， 

例如，不能在两个选頊中忉狳。 
如果你不相信. 

谙 t S 试试煮。 
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9 循环 


" 自我重复的风险~ 



有些人说 t 一点重复是生活中的香料 U 没错， 尝 U 新好有趣的亊物确实很刺 

激, 但一点点重复真的有可能完成-天的工作 & 强迫性地消毒双手、 it 人神经紧 
张的确 嗒声， 每次收到邮件躭按下 14 全部同复" …， 好吧,或忤现实生活里的重 
复不 fil 得卽是奸弔，但在 JavaScTipl 的肚界[、 " -点 msr 可能非 常便利 《 a 
ff | 盂要脚本重复运行代码的程度很 L . L 人惊讶，扼环功能因而闪闪发光，没有循环， 
你将浪费许多时 M w f 剪贴代码。 
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几步才能找出地下的宝藏? 


X 标示藏宝 M 点 


if 藏的节趣， 敁难 抵沆的 t 秀感。这甲.冇张诿 

宝 III ，需耍一点 JavaScript 的防助 fl 37今 



所以问題是 . Ja vaScri pt 如何童^[动作? 
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循环 


鉍 f 相轵 ……箍环 

JavaScTipt 的重复机制为_环 ( loop ) ,该个机制 ih 我们®复 
代1 尤炖以 for 湄坏待别适合1复动作已知次数 g 牮例闹 
言、 £ o . r 涠环适合计数的仔务，如制数 : T 冬或倒数至足个数^ 

for 硝环山4个部分组成： 


循环能 重 复迗行 
程序代码特定次 

Wo 


O 初始 It ( initialization ) 

初始化 H F for 循环起始时发 
生一次 * 

0 测试条件 (test condition ) 

测忒条件检喪循环足介逛 mt . 
线跑一轮， 

0 动作 ( action ) 

循环电 的动作就 是玷 -轮貼环 
实阽妥 k 的代码。 

o 更新 ( update ) 

循坏电的! ii 新负盔 r 鉍-轮 
结嵫更新任 w 循环变吐。 




r 




^^2. 3, d ^ 
务 一 玲哋找. 


\ 


❹^…❺^■•❹^■■❹…❹… 





for 循环的 4 个部分 < 如何与藏宝囯产生联系？ 







另_好:砵 U 
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for 循环：计数 


引入 for 禰环的导宝游戏 

t = or 術环适川于抟卜_来这部分的藏宝阁，闲为帝涉到已 知餃进 
的:^步。套用 for 術环 T 藏宝阁的第一邹分，将如 f 所示 s 


❶ 0 O 

for (var x = 0; x < 37f x++) 

V 


(f 和 T 的 盘字. 
聲 c »4- 1 传同 



takestep() 

❻ 


分解 fm: 循坏的代码 t 





初始设定计数器空诂 x 为1 


认 0 丹构4霣的 Uv^tpt 
砰矻*業私 r I 贫磾坏忐 ET 以 


确认 x 迆否小 f - 37. 


运行淅坏的动作部分代科，本例为运彳/ takeStept ) 函数, 
增加 x 的计数，回到第2步 T 准缶开始 F 一轮可能循环6 


抱过37轮循环后，结束保 K 等子37。-切都们功 f for 循环4个 
部分的通力合作,一起建立了 JavaScript 的東复机制, 


初始化 O 

循坏起始时的 If 数器 x 


为 

var x 


= 0 
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蒯试条件 O 

如果蒯试评诂为 true , 

才会再执行另■轮網环， 
本例的条件垃 X 小干37 d 



37 


37 cycles 


动作 © 

调用 takeStepOEl 数以 

踏出下一歩 t 

takeStep () 


更新 o 

把现存:的 X 加丨 s 赵新循 

环的计数器《 

X ++ 嗜 ★ * 钤盘^\ 

鸟； r = 和同 



Download at http://www.pin5i.com/ 


循坏 


蘚割循环 


所有 for 循坏都维持一致公式 t 甫要它的4个组成部分待在特定位宪。 
幸好这个公式保留了很多灵活性 T 能制作我们 Sd 的術环。 


玲夸 ot 钚舴以共連 


W 始怀的 代砝 . 邊常深 
吁 頊戋闵钚符盎 a 


砵钚 控制场更扣. ，: i 常尾缯■^崁 



Q + Q + 


| AceJon j 4* t ； j , 


tI 个頊句 
(琏 I 合锡 < 



钯试条 4. 蕞耔形威 

ttut/itUe 


初梅 扣龙也 绛件 
i ¥ 分栌代这后.备 

電加 _ t 分寻. 



姑等®起5銻 n . 
f 砷知更斯代玆-. 



完成下列代码，首先拫醒用户输入一个大于0的数宇，然后使用该数宇怍为 for 循环的倒数 
计时 t 軚像老 电彭片头的字 蒂一样 （ 4. 3 t 2 、 1 ， 开始 1 > ,还有，记掲验证教字确实大 
予0,才开姶 ® 数计时 B 


fffMJU 4 f 




掩 m 用户檢入 
盘？， - 


var count = promp !： < " tint er ^ n s jtribe?r greater than 0 ：", ■ 1 0 ")； 
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习趟解答 



if (count > 0){ 

I a it ■ n ■ r 9 riri p i ■ i r i ■ i e i i! i 1 i b i b i ■ -i a ! _ 

T W(v3rx = c<?unt；x > 0 ； x-J 

■ ii I： ■ r I e s 鬱 pi ■■■■■■■■"-!■■ »■»■■*■■» 41 

"alert["Start!tig in … "十 x ); ^ 

ri piri ripi ■ - ~ - i. - tJtJ L . 

alert (飞 oil film ! 3 ，); — 


Mandango ： 社议专用 


电影晚划位工與 

JyvaScripL 循环不只叶用干电影片头的倒数汁时。你<能也知逍 + 
大多数体格魁梧的彪阳大汉一起夹看4影时< 都珩印能勺其他人 

相隔-个空位。因此， Seth 和 Jason 想制作 M ? indEmg ( i -专为壮 

汉设计的电影院划位 

他们想到叶以-次划三个位踅，实栗的什汉朋友间就能保有-个空 
位* M 题是 + Seth |P Jason “还没’想出该公么做…… 



o 

6 et^i 


0 

Jason 
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循环 


先碥认剝7的痤忮 

他们而前的攏战是:逐1搜索每排座位,找出二个柑邻的空位 & 



的伽' 


三个轵*空纪。 



酷！ 

三个扣邻的空位表示很允 
裕的电肜欣贺空间 。 
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磨笔上阵解笞 



使用下例的空位示裔图，设计使用 for 循环寻找三个相邻 
空位的代码。请确定规划出楣坏处理每个空位的方式 


如果空@以的变 f S C . 伢笥 龙样坏 si — 让 /I 庙圮. 4 士 闰一 轵是蛋 
有三个 ft ： 邻的 (^ Hi ), 


false true false 


三个洼磷空洁 
a 电! 


循环、 HTML 鸟空位 


哇 g 布 w ® 读劣式 I 
^n^an^O 网弄工 - 


你不只忠要以 JuvaScripi 代码的循环处理 HTML ■的阁像元桌 
也忘耍以 boolean 变话存储图像代表的座位是 舒为空 位， 
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循坏 


电影晚逶 忮变量 

开始思 考以循环处輝.庵位，字找空位的方式柿 . 湔以 hviiScript 代码圼现各 
个座位足否已披占据， - 袖9个座位的表现方式 t 可以垃9个 boo ] ean ^ t t 



观在你已准备奸创建处理9个座位的 for 循环， M ] F 检侖是否能取得 



枳邻的=.个空位。 
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数据数组 



JavaScript 有祌特殊数据，教组 ( array ) t 可十存储多块数据千 
个变设屮 - 数组只 冇一个名称，这点与一般变蚨类似—— [ H . 数组有多 
个存储位置 。 它就像你家的储物柜， 明明只 是一件家几,但有很多格 

{fmm. 


数沮黾的每个元素，拙由两块怡息姐 成：值 ( value ) 与其唯一性的键 
( key ) , 需以键 i 力问 值。 键逋常只足从0丌始11 •算 1 遂次加丨的迮续编 
数字编4 键乂称 为索引 （ index ) ,构成索引数组 (index aTray ) : 


制建数组与创建^般变置相似,只不过你必须告诉 JavaScript : 现 
在锘要数组，而不是仅需一怙存堪实上，你正在要 
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描环 


数组值乌鍵一 起存储 

不论是否为对象,创建数组后 t 即叶增加数据给数组，并从中访问数 
据。取得数 m 存储数据的丈键，訧是……键！浊一尤二、与特定数据 
相联的键，用于访问数据。若是索引数组.你 u 需使用想访问的数组 
元素的索引 t 


我相 . ii 的名枋 



a 围起 


上段代矾设定数纟 M showTime 的第一个沾（本例为时间值）。如果 
你不希茔每次只能 T_ 动设定一个数组谪，也可以在创建时初始化 
个 数组： 

var sliowTime = [ ,F 12 ; 30 ,p # ,r 2 :45" # _’5:00 rt 





_郭分，耷剖建_ 









利忘 7分考。 


等一下.这段范例+像牵涉到对象啊？到眩昆怎么一 K 事？其实 t 上 
例 f [ t 由直接以值创建数组（对象），而间避 r _ F _ 常创建交句象的// 式。 
你只要列 出数组 应存储的元索 丼以 方栝号围起.即可存入数据，数 m 
填入数据后，就可以使用 r 。 


个 d 



alert ("The late movie starts at 41 + showTime [ 4 J + " . ™ ) j 


数梅子 j 一垓所存储 
多段数 HT 
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数绍离惘指数 




本周主题 i 

探索连续数据存储者的心灵深处 


HadFirat ； Array , 很髙兴你来上节目1我听说你很植 
长存储多段数据， 

Array (数组 } :确实如此 s 我就是这么地有容乃大„ 
你谣要存储 M ) 组丰符屯或300组数卞叫？我就是你的敁 
佳选择 a 

HcadFim ； 听 起來爽 .让人跃跃欲试。不过，使州一般 
变设不躭已能存储大 M 数据了岬？ 

Array : 当然，鱿像你想赤脚走去上班，耶也娃你的自 
由。我跟你说.达成 D 标的方式一定不只一种。我比 
一般变&提供储存多段数据的更味方式 。 

Headfirst ： 好吧 • 我述是比较喜欢穿鞋出门。但你究 
苋好在哪也哫？ 

Array ： 这么说吧！假设你毎天部会乖珉笱_篇 B I 己， 
过了几年后，你耍如何保存毎 UI ? 

HeadFirstj 不是都在 U 记本里吗?有什么问题吗? 

Array ： 你颅设了毎-豇 R 记都依某种关系而射织排 
列。如果我说的 EH 己.只是随息忑在鞋 盒黾的 小张备 
忘录呢？你的 U 圮不就突然变得很难栝理了？ 

HeadFim : 嗯……把数据存储在敢组里，跟 R 记写在 
记亊+里，又冇什么关系？ 

Array ： 囚为我以此方忒组织 数据， 让它容易被 U ? 间。 
例如我问你去年7月6曰的曰记内容，你可能叫我翻 
到】24豇。数组数据亦间此理 t 只不过数组的內码称 
为键 ( key ). 

HeadFirM : 我听说过数组索引的大名，但没听过 
. 什么是#键"？ 
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Am y : 啊，忘 U ! 先说明了。 41 键”是个通用的称呼方 
式，形容用于寻找另-段数据的怡息。-#引 # 只是 
一种形式恃殊的键，它是数 f 直键。所以说， n 记的洱 
码不只垃键，也足素引 & 如果你在1_+论利用不重复的 
数宇寻找数据，此时的键和索引其实都一样 # 

Hc ^ dFlrst , 原来如此。对了，这4东西怎么踉循环扯 
上关系？现在我只刴 下这点 不了解而已。 

Array : 嗯，不见洱是 f [: H 东西都冇关系。就算不扯上 
解， 我也一样很适叫干存储数据 u 然而，我蚜以 li . 
循环循环处理一堆数据时更为方便。 

Head First , 怎么办到的？ 

Array , ii i 己得循环常使用倒数计时做控制叫？以计数 
器作为数 m 的索你箱.这样+就得到踊坏处理数 
组数据的方式 r ? 

HeadFimt ； 慢点, 換点. 你说循环的计觳器可当成数 
m 的索引，用干 寻找数 据叫？ 

Array ： IE 是 4 b 此。 

H ea dFi « t ; 昨，这种能力真是太强大了！ 

Array ： 我知道 3 需要使用循环处理数据的脚本时 ， /T 
佘发现我如此不可或缺， K 蓝几行代码，就能以淤环 
处理整个数组的数据， m 酷吧！ 

H « dFirsf 3 确实可以想象 a 谢谢你今天过来澄渚-些 
谜团 T 还冇你跟循环的关系， 

Array ： 我也很髙兴。有空随时欢迎来找我哦[ 
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播环 



R ： for 循环的运转可能永无止埔 
吗？ 

^ 2 可能， 那就是令人畏惧 

的无喂循坏 # 里然有可能创建不会 
停止的循冧，洼定在有限时空里一 
再拥坏……至少在你; i : 斬我入科页 
莳。 无哏 徂坧被梘为不好，在于它 
们阻掊了脚本的其他活动——它 
是 JavaScript 版的销定枉序，很像 
Windows 著名的 S 色屏幕 T 只是没 
郎么明显。 

无限捆坧，发生在诚环的计权器不 
会正确史新或不会改雯，0吒无 
法 il 成条件測试为 false 值的状 
况，因此，你应该再三仔細地检 
查 for 调坧的测试条件以及更新计 
数器的 it 辑 ， H T ■ 如果诂发巩脚 
本突然停下来没有动作,就表示你 
邁到 无怅榻 坧啦！ 


闲 for 循环的动作可以使用复合 
语句吗？ 

^ ；当然可以！事实上，除了晟 
闷单的捣坏外，你将需务复合语句。 
因为最实用的循环最后都需要饨私 
处迮不只一段语句 D 

1^1 ^当循环的条件测试结果为 
false 时， 动作部分还会运行最后 

一次吗？ 

答: 不会， for 摘环的动作部分只 
在条件评姑为 true 时执运行。一旦 
评括为 f a 1 s e + _坏立刻.结柬，不 
会运行其他代码. 

1^1 : 索引数组一定从0开始编列索 
引值吗？ 

h , 也不叶 . 预 设中， 所有索 
<1軚組均从0开始，你也〒以改写 


达领设计，改设数值姊为任何数值+ 
里然这样不符合常说 D 瞭非你有非 
常好的设计迓由.$然最好不要打 
破从0开始的惜例，否则可能11成 
困扰, 

：存储于数组里的数据均为相同 
类型吗？ 

答:不见得如此 a 以 掮坏的 用途而 
言，数組軚据均为相同类型就报重 
要， EJ 为循坧的重点是处艰一組相 
似的数据> 假如你使用循坏处现成 
绩致组丼计算乎均氙績 * 知果 此时 
数植中有 tsooleiinii ,有意义吗？所 
有教紐； L 索郝应该是数字才吋。追 
呔軚紐 T 以包含不吟类型的值、但 
最 好迈是 存铈相内类型的敦据 、九 
其是存鍺一纽相似数掂时 fl 


目前位置 ► 201 


Download at http://www.pin5i.com/ 












磨笔上阵解苒 



为 Mandango 稃序创建 seaLa 数组 t 然后以循环处理该数组, 
使用 alert 框提出空位信息„ 





var &eat& = [false, true, false, true, trite, true, false, true, false 1 ： 

it J ■■ ■ 嚅 . ib_i ， r 1 ^ I ■ I i r ■ ■ a ■ « I n r ■ ■' ■ l j ■■■.■£ ibj ^ j i . ■ _ .1 a .i b > s_i _ • _ « _ ■_.■，_ ■_■ _ T ^ ( ^ J J 

for [var ! = 0: f < seat&Jendth ； i++){ / 

r，pa p % r ^ p f p 1 b i ■ i ■ -ra ■■■■■■■■■ j ■ ■ ■-■■■• v_ ■. a ■ ^ d b _ _ _ _ _ . f P ^ P ^ B ( s 9 ■ ■ ■ ■ ■ 


L. 




釋 效 交 fS (tiuis) 或打立 
倍再 1 戍不向 
的山 it 柩。 


复习要点-- 

p for 循环能把一段 javaScnpt 代蚂重复特定次 ■ 虽然数组存储了多段 信息，怳只有 -个变逆名 
数。 称 g 

■ 递增 (+0 与递减 (-) 运玖符，提供更新循 ■ 索弓 I 数组透过称为索引 (index) 的数值键访 
坏计数器的便利方式 # 问^ 

■ 数组能把多段数据存储在同一个地方。 _索引数组与循环是好搭档，让我们能用循环计 

数器逐一处理数组 黾的数 据。 
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循环 


认 JavaScript M HTML 

Mandango 以一个 boo I ean 数组发 4 空位，所以 ， F — 步就是:把数组转 
换成反映座位划位状况的 HTML mit (t^f^ hup^iw^wMeadfiritlabs. 
com/books/hfjsf K^t ) . sfii^n Y 现 ft M a n dfvn go 的网虹 . h = 



上图春起来还+错，实标上却没冇任何代.码叫干对照 boolean 数组与网 
M 上的座椅围像。这 K 子有问题了 1 


wma - 

如何联蛣记录划位状况的 JavaScript 数姐以及 Mandango 网页上的座椅 
图像？ 
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我看到了……空位 


Mandango 的划位 状况: 视党版 

t-mH JavaScript 数组与 HTML 阁像，筲光需确认图像的編排 
采用可访向的方式，然后决定代我不丨 m ! 划位状况的图像 6 我们 
先解决第二项忏务 v 


空位 




已售位 



se ^ l _ avajl.png 


seat unavaiLpng 

这些座位图浼都指派给 HTML 的座椅图懷的 im , 以设定出现在 
网饭上的阁像 - 


选 埽某个 瓊忆时.号 
^nla^o ^ ( 64 i 4 &B(A 
个® 嚷， ~ 



seat_selecit„pr>g 



这个 JD 存姑射敦设 . 务 C 疼 

的级谜噱《 — 念 ㈣ 
以0 fl 鸪 . 的6 f | 来，耷 


<img ld ： ^ H seats" aTC^ H seat__nmavail.png* alt="unavailable 1 


抟 F 来的挑战，变成以循坏处理 boolean 数组， 为 HTML 的每个< i mg > 
榀签设背座挎旧 像， 这项任务的必盅歩骒唁循环处理 s ^ Lts 数组惊人 
相似 D 奉实上，唯一差別只有动作那部分不同而已。 



计数器变银 i 初始化为 CU 

检杏 i 是否小十数组投度 （ 9 个元桌 ） a 倘荇小干数组 k 度 ， mm 
往第 3 步并继缡下一轮循环 s 如果不是， _ 离开循环。 

运行循环的动作部分代码，本阑为设置座椅图像。 

增加 i 并 W 到访 2 步，开启 K - 轮可能的据环 3 
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循坏 



故大 iniiSeatsO 焱数 


i n.i t Seat 5 (} 


Ws ° 贫钱的 知均化 


function initSeatsJ^ { 

/ / in 11 i ^ I i ^lie appe^/imce of aill seats 
for ivar i = 0 ； i < seats a longth? i + +) { 

if t seats [ i]'t { 卜、^ 

/ / Se^t the §Qat to availatolo 
、 docuu^f^rt - get Element By Id seat w + 丄） -src 
, docunrent .get Element By Id ("seat H t i) , alt 


// Set the seat to unavailable 
documfint ..getHl & rr!ennBy I d ( " 

document, getElementiBy Id ( H seat H 


f £ ^ 
利设 $ t _ 宾理 


shady Dnload " initSeaL^o 


<i】ng id="s^ a tO 
<iing id= p s0atl 
(iang id='seat2 
<img id= H s^at m i 
<img id =" seatd 1 
id - n E 3 eat 5 1 
id^'a^tG 4 
f irng Ich " aeat ?_ 
<img id=--seai:S H 
</div> 

</bocfy> 

</htini> 


src= "，. 日 t = H " /1> 

sre =-" 孕 U =- 琴 /> 

s . rc =— ， alc = K " /> 苫弗凌 吒 沐的 

src =-. ；!][-«■ /> 批耷 dt . 承沒均较 
£rc=HH H " 

Src =.* alt = n " 

sjtc ^ alt =-» /> ^ - 

Sfc=n " alw / >^br /> 



G 芾座埼 f ： 
^¥}1D ^ 
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划位程序的变 s 


非牡汶专闲的划忮程序 



座位状态初始化后，终千可以前进到划位的部分，这才是 
Mandango 的设点 u Seth Jason 决定先会认 4 找单一座位的脚 + , 

投人寻找二个迮续吨位的终极版寻找中一吨位可简化 S [W 
的讧务 + 他们可据此遂步建立应用稈汴, 


既然 Seth 与 Jason 岘仵想拽索单-迚位，脚本需嬰的荔-件乐商，就 
是追踪迚位选择的变 U - 



Seth 椏出了很奸的问题。变边 selSeat #储痤 f 立的选择状态——4： 
范0到8 II CL 被选走 的座位。但你还涪#知遒用户是否尚朱选择仟何座 
it . 可用特殊值指 示尚未选择的 状态，例如 -】 （尚未选择任何座位), 
所以变眭 selSeat -开始 黹要初 始化为-1。 


SWSeW 愛 f 處在初始為 
砷本汊 "决来！埤 「 的 

m^ i ± H * 


有了庳位选择状态的变我们就准备奸组合 findSeat ㈠ 甬数厂 
这个函数将拽索瘅位数组，# 找空位 t ifii 活馄醒用户接受或拒绝空位 
的选择。 虽然人 坱头的壮汉们不太可能满意这个商易版的 MEihdango , 
不过它是戍功的一小步丨 
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JavaScript 冰箱磁锒 


p 的 =:===: 
代碍 B 


function findseat() { 

// J f seat: is a 1 ready selected, reini tlalii；e all seats to clear them 
if ( >= 0) { 


// Search through al1 the scats for availability 
for (var i = £}； i < seats. lengthy i++} { 

"See if the current seat is avai 'i sbl e 

if ( J { 

， r i rTPT-TPT^i _ - r t ^ - 

// set Lhe seat selection and update the appearance of the seat 


document - getElementByld("seat 


document.gelElementByia("seat 


□ eat^select.png H ； 


■Your seat . 


// Prompt the u&er to accept the seat 


confirm) '"Seat ^ + i i + 1 ] + _ is available , Accept?' i 


// The user rejected the seat, so clear the seat selection and keep looking 


dqclient. gotElementBy Id ( 11 seat 


1 s eaL t _a va i 1 . png 1 


docyment - getElement By Id ( 11 seat" 十 i ) * 


'Avdildble sedt 
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JavaScript 冰箝磁铁解答 



JavaScript 冰葙礤铥藓答 

MaT5daftgo ^ firidSe ^0 禹杈負责为用户手找空位 + 而后确认 
或取埤紙 t 起下 ㈣ 小槪钵助5响与 Ja . Son 朴完消失的 



function findseatU t 

// It se^c is selected, reinitialize all seats to clear them 




/ } Search through all the seats for availability 
for (var i = 0; i < seats, 1 engt.h ； i + +) { 

// See if the current seat is available 如累廢 f〆 


docLimeni: 」 g e t E1 ement By I d C "seat 


document . getElemenLBy Ifi ( n seat- 
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试行： 辱找单一寒位的程序 


搜索申 一座 位的 ] V | ain.danga 版本使用 £ or 循环及一个 数组！ i it 
用户搜索电一可沿的座 d 不太符 合扑汉们的要求.但确灾河以 


- /■ 
)BU 


函〜 纖爨函 & 函 


>C 


1 jir T Canc^i. SP 3 取 A 
)Seat 2 栌！粬 ■ 


，叫 tiL 


Seat 2 Iavailable . Accept ? 


f fik__ ’ 芦 & I 

f— I - Seat A is available. Acte 


4 的 . 3 择 
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ft 环微环循环 … 


太多好事也 不好： 结東不？的循环 

技术上， Miintiango 的申 一座位 版彳以找到雄.空位，却出现了程序 
不知何时结屯的问题。 就毯用 户选择 r 某个空位泮按下 M oir ，脚本 
仍会继续运行，继捸跑过剩佘空位， 



•夂嶒 眉 ^ ‘欠 」 


我 f ) S 拉竑 t ! 埤 Se<itA 
褚諸声 4 真 

te^fSn 


Cancel 


S«4t S is Aviilable, Accept? 


Camtl 1 f OK 》 


… U Aiik 
接 m 兔…… 


M_ 

i m Vaa 






循环 


循环总是 t 要一个（或瑪个）结東的信吾! 

我们的划位程序为 m 过度热心？似乎是因为搁环+会存:划 
位后结束 5 > Jason 认为应该更仔细地査看 findSeatU 函数 
的 for 循环了。 


for Ivar 1 = 0> i < seats * length? i + + ) { 

// See if the current seat is available 
if fseateEi]}( 


淋 O 基盘祛牙用卢史吾 
( th «) 线-否" ( Mw ) . 55 店遂 
W tULe/iatse 免 . 


/ / Set the seat selecj^ion. and update the appearance of the seat 
selSeat = i; 

dacument .getP-Ie^en^y id{ 寸 i) , src = n seat_select. png" ? 

document a gGtEiGmeqfcById("seat ^ t i}.alt - w Your seat"? 


/ / Prompt the usev accept the seat 
var accept = confinn ( h Seat M 4 (1 4 1 ) 4 

a i Li.aCLgept ) { 


is available* Accept:? 11 ) j 


/f The user rejected the seatj, so clear the seat selection and keep looking 
seiSeat = -1r 

document. get Element By Id ( ■ seat " 十 i) .arc - n seat __a va i 1, png w ; 
docufnent - get Element By I cl ("seat* + i) ,alt - "Available seat ■ 7 

? 





知 I 龙户 4 i 受其个不含廷 
芏 4 何拳縐，访球褚蜡沄样 3 




所以说，用户按 K ^ ucur 以不选择坫个，位时， selSeat 变设设 
为 - I , 循环继续运行 - 然而， 代码完全没冇提到选择$位后该怎么 
办 -H 前只能 lUh Seat 变培记忆当而座位 ， 佴却没办法俘比循环， 
不 II :循坏继续谷找座位 - 





当用户按下 OK 按钿以接受当前的空位后，还需要 
有什么行动？ 
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休息时间 …… break lime 


体忠 - 7 : break 


Mandango 松序代码的问题，在子川户选择.座位后，宙要脱离循环。 
4行的修正方式之一，是尝试改设讣数器值 T 使数 u 大千数 m 丧度, 
以欺踮 for 傾坏 


i = seat s * length + 1; 


@ 左 一来. I ： 啤喇说科存 科 尧皞. 
象效 U 物€今方式。 


虽然上洌是个卟常聪明的忮巧,但述有吏俺的方式,而且不盩在计数 
器 h 动手_以欺蹒循坏条件句， break 访旬女为结朵■段代吗而设 
计，然也能结柒術环。 


乏別她达评口: ■不 



，骷环遇到 break 语句，它立刻结朿， 龙仝无 视条汴句，所 
以 、 break T 立刻眺出循环、没有多余疑问的他利力_式。 


ccmtmue 勺 bredk 的关系很密抓它会摆脱气附这--轮循环.但+ 
会完全离开循环。换句话说,你4以使用 contimie , 强迫据环跳人 
¥北 

賊±朵铕 a —辂戍玮，苟 
杜舐 fiy -轮。 _ _ 

continue ； 


brea'-c -j conti nue 都极度适合调格浙坏的 
控制. 不过 Seth 和 Ja « m 在 Mandango t ： 遇到 
的问题，将山 breaK 榀供解决/；_案。 
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循坏 


问使用 break 语句时 ■ 当前这 
轮 for 循环的剩余动作代码仍会运 
行 完吗？ 

答:不会 。 br ^ ak 洛句茯制 11 立 
必厂枯東徇坧，完全褅短了工常的 
從环流 



#1:为什么利用循环计数器以跳出 
循坏，是项不好的举动呢？ 

^ : 囚为循坏计数器若未用在正 
途，有可能 it 成不手常的 缺掐风 
给。此分 , j 的计教器不是用于访问奴 
纽 1 ‘和勒用途 ） ，而是手动强迫计 
故器变成超出数紐长度的值 t 用来 


结東调坏 3 —般而言，我们希望循 
坏的 ■'更 新 〜 部分是味一改变摘 
坏计数器的地方^总是会有尤许投 
机取巧的特硃案例.钽不是这个利 
子一- break 语句己能妥善地处 

理從坏的中断> 又不会 遑成飪 何困 

扰。 



^ 磨 


hBt 


^閒咖叩 0 的 findseati} 函数的 for. 循环， 鼉要在用户接旻 
座位选择 后中断 _ D 清 ㈣ 人解中__代码.务必加 
入说明代码工怍方式的注梓^ 


// Search Lhrough all the seats f or avaliability 
for Ivar i =■ 0; i < seats. length; i + +) { 

// See if the current se^iL is available 
if (seats[i]} { 

/ / Set the seat select ion and update the dppearGince of the seat 


documen L - geLEl ement By Id ( h s eat 11 + i ) - src 
documeciL . get Element By Id (■’ seat 11 + i ) , alt 


’seat—select 』 png’ 1 ; 
'Your seat"; 


// ProinpL lihe user to accepL the seat 
var accept - confirm ( !， Seat " + (i + 1) 


is available. Accept?") 


else { 

// The LiS^r rejected the seal, so cletir the seat sel ection ^nd keep looking 
selSeat = -1 ； 

docuia^nit, .cjetElementBy Id i m se<x^ w + i} * src = ■ ssat_ava i 1 , png ■ - 
document .gstEIenisntByldt "seat - * i } .alt - "Available seat®; 

} 
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鹿笔上阵解笞 



笔上阵 
解答 


Mqn^ngo ^JfindSeatU 函数的 f 此薄环，需要在用户接受座 
位选择后中 Ml 獅 tUfiA 肝中隨卵賴，务必加入 
说明代码工作方式的注释4 


// Search through all the &eat& £or availability 
for fv^r 1 = 0 ； i < se^ts»length ； i++)- { 

// Sec if the current seat i e available 
if (seats[i]) { 

// set the seat selection and update the appearance of the seat 
= i ; 

document . getE LementById (, " sea t " + i ) . src - " Eeat:_Belect . png 41 ； 
document, .gee Element Ey Id { "seat" + i} .alt = "Your seat"; 

H Prompt the user to accept the seat 

vaE accept = conf ifnj ('Seat 11 + (i + 1) + n is available. Accept ?")； 

(和 _H .... .. .... .. . . . . . 

// The u per accepted the 5 o we re dene .. 

break : 

1 . ..... 

else { 

/ / The user rejected the seat t sc clear the select a on tund keep looking 

selSeac = -1; 

document .gecElementBy Id.{ *seat * *■ it.src - _seat—avail .png "; 
dDcunient . get Element By Id [ "seat," + i > , ei i t = ■Available seat M ； 

} 

} 




真 iE 仕议皈的 Mandango 

设计 Mandanso 的焯始意图，就尨允仵川 P 拽索飞个一组的电 

影院空位 □ 笮一令位搜索成功圮， Seth 与 Ja 扣 n 终于准备专心 

制作 K 正 44 有男人味，的电影院划 位枰 序。他们需耍松査 Z 个 
―组的选续空位。 一 

— 将三 个进錄的瓌 倍 … 

深多空向! ■ 
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循环 



讲电崧，讲浔我繁令 K 袋龄 RS 到爆未 

花… . 哽. 我 W 神 A 个癡 IMf 潘念& 

itfe 葙浃三个座 tt 的技杳 3 敦 u 盏迮么 m 的! 


/ / The ： yfter re j t^e 8 _ ^itl 5. he ?tedt a a s 巧 cr L ea r Lh^ s^di k ts 11；^ t i cjm dnc3. 

* -1 ? 

docU3n*-'nt , g^t K1 emrnt Ky Id < 1 + 3 ) vBt ^： - "i 1 r png - r 

document, get Element by Id ( fc &i3^t h 冬 i) , a ] t = b Avfl 5 labli? scat 11 1 ： 

doc yjnent - get Element,By Id i h seat" •- l i * is l .src = ■ e eat _a va i I.. png 

dociunent, get Element By Id ^ m seat u t- 1 1 - ij I .alt = " Available seat 

doc ： uJifienL.geeElenienLByIdi"seiif + Li* 2] I ,src = - aeat_avaii - png 
ds>cunueAt - gec_E LefinemL&Y I f 】J PS!ied [ ” ， r J ， 21 I . a 1 L = 11 Aval labie seat 

* rf ^3 : L ^ 4?- b4 .fl. M f f^an^A¥\^o 

B? ($■, 部翁 A/、hnp • // www*. iheiAJf 彳； f 山 6 贫 . c^m/books/ 

^ / mx T 


用户不 5 这辞砝 
冉龙囝深省免_空倍 
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循坏 


含還辑、优雅、设计良好的方索 
—^ 

处理 Mandango 需要的连续三个空位检查时 . 还有更好的方式。 
嵌变 it 的版本的确可行，但还冇改禆空间，而 R 这个改变主 
要4 程序的 优雅有关， 



O 


虽然 S ^ h 打滾耍 赖不悤 接受 # 优雅”的改变，但 
有些怙况的确情得让代码更为“优雅”—— 
效率、鉍于押解和维护^的另一种说法, 
以嵌葚 if 为例，把所有语句结合成-个 if 将 
优雅许多……但要怎么做? 



th AND 这 Jf 符 执後 
丑个 hooUan 任 4 吞均 4 


if {seatsfi] 5 {& seats[i + 




庇& Ei 


boolean . 的 AND 运■^符 （&&) 比较两个 boolean 值达否均 
% r rue . 以 Mand 叩 go 的代码为例，使用两个 AND 运讶符， 
叩可检查7张座椅的 m 垃否均 Xl triw 。 如釆满足耍求 ，你就 
知迢有二个连续的空位 。 N 题解决了……还附贈一点优雅气 
质！ 


Download at http://www.pin5i.com/ 


目前位 S ► 217 



探讨 boolean 逻辑运算符 


boolean 运篝符的逻輯摴密 


各位£1技舂过儿种比较运箅符，例如==与你昔到的大 
多数比较运算符都先比较两个谪，然店产生 boolean 值的结 
果。 boolean 逻辑运算符的结果也是 boolean 值_但它们只负责 
比较 boolean fift -执行 boolean 逻，辑比较。 

m 

a && b 


如 I j AMO* 伶 4 (e 

bCK ^ iin 逻辑运算可互相结合 t 迷立很有趣的逻辑比 较1 通常 
用千制作复杂的决策《 



0 K 

a I | b 


如蓽 • OR 4寿 tT 4 i # . ci 
J { 铐菜絝 tT ^, ®5'). 
lh 


■I 法吾用 "3 ■ 泰赛 A □oie'flrt 1H 
ifi 狂 L 


if ( ( laz'geDrixik && 



1 ar^«Popc oirti ) 


freeCandy {)t 


你罨 a g 3 f 



fl ^6 , 

卷 iatse, 如杲 4 力 i^ se 时薄 
i ^ ue B 



你无^錡菜 =■ 


本例中， AND 运猝符州于怜#大杯饮料与大楠煜米? t ……这 
坫优豳迄 If !购尖优患®秘，附附免费的楝杲^成者 ( OR ) 
,述有另一个获赠糖果的途径——优 e 券，所以，你咁以订 
购大杯饮料 AND 大柿炤米花， OR 令出你的优惠券。如果没 
f | boolean 逻钳运这符的帑忙，将难 LU 完成这先决策。 


结含 boolean 逻輯迗 
篝符 t 玎运成 t 杂的 
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循环 


问： 我还是看不出来一般 boolean 
运算符与 boolean 逻辑运算符的不 
同。到底哪里不同？ 

答■， 首先，它们郝是 hortkan 运 
算符 -所以运算 t 毕的蛣果都是 
boolean {£., 唯一的農則在于用在 
运算时的麩据„ 一般 bookan 运算 
符用于各钟 R 据.它们定成一般比 
较，例如 w 等于 " ， u 不等于 
: 大于”等等 s bool ^ ti 遇辑运算符只 
运用在 tKJolean 较槐上 s 因此用于 



完成 AND 、 OR , NOT 等运算 n 所 
以. boolean 泛辑运算符只与 true / 
false 惊息合用，— 4 l boolean 运算 
符 S 彳可运用于各种扳据类 

f 5 ) ;所以， NOT 运算符是个 
boolean 逻辑运算符罗？ 

答 t 是的。它只吋 boolean 值运 
算， 符合 bootean 逻辑运算符的資 
格。 它也是个一元运算符 (unary 
operator ) ,囚为只需运算一段敖 
据； 


问;括号如何既尊重 boolean 运算 
符，又产生作用昵？ 

I :括号姖让我们变换 双汶的 
运算符估算颃序 f 不只是可用于 
b (Hi 1 e a n 运算符 a 把 一 M 运界放 
在括号里 s 做成组，可強制该 
项运算优先执行。以免贤杨策 
的代码■为例， largeDrink 
: argePopcorr 』 即被僅制比 I I 运厍 
先执行，囚为它被放在 （） 中„ 
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赓笔上阵解答 



终子，充溻男人哧的划位程序 


Mandango 划位程序现在能正确地搜索出二个连续的空 
位，就算是肌肉最发达的男1:，也将对你的电影院划位 


狃逋用卢趄蚩三个連螬 


程序感到满息。 
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循环 


©到籙宝® 


Mandango 我们可以回头导找隐藏的宝珐__ iit 己得 

藏宝图吗? 


Z1 ^ 


0 mtru 一迮走到外形像爆米花 
的石久为止。 


O 首先，往东走 w 
步， 



mm ^ 


O x 如出 f 藏宝点! 


for 循坏已能很奸地走过联宝阁的第一部分，但第二部分还没 
解决， 而且它的桃战#來也不适合 [ or 循环的独冇技巧。如果 
七知道循环需要苋 E 的次数 T 很难设定 for 循环 I 十数器^ 




藏宝国上的两个步嗪令什么不同？藏宝图的笫二部分该如沔转 
换成循环？ 
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还要跑多久； a "while" 

继頦执行 while 循环 t 疽到遇见彔件句 

鉍然可以创违出执行藏宝图第2步骤的 for 调环， m 述有史好的选 
择。 for 循环的构造以搁环计数器的概念为屮心， while 循坏则设 U- 
为等到恃定条件的达成。它的条件句不见柯需与循坏计餃器有关 B 

while 循坏由闲 t 不 M 部分 构成： 


while 循环能 
重复代码 ,£ 
到特定彔件句 

为 true 。 



❶ 

测试条件 
(Test conditon) 



Qi •■- 


A 

*■* 


(Action) 


Ql 


测试条件 

测认条 件检査 ti 坏垃否应该 
继续搁坏， 


行动 

術环的行动部分则是毎一轮 
循环 电实阽虽复的部分。 





测试条件 o 

只在瀰试评估为 true 时 
执行另一轮循环*也就 
是#不到堪米花石久的 
时候 • 

IrocfcVi sible 

f 

[ 行 gj 

\ 调用 takeSetpO 兩数， 

向前迈步 4 = 

takeStep () 



把 whUe 循环运用在菝宝闬的第：部分，形成 简护得 不可恶议的代 
d 至少比 fox ■循环简 ¥-: 


o 

while t ! rockvisibls) 
takeStep(); 

❹ 

while 循环的各部分运作 如下； 

O 检査是否看不到心头^如來哲不到，移向第2步，执 

行_轮循环，如果看到石头， SI ] 停 th 循环7 

© 运行据环的行动代码，此例是指 takeStepO 函数^ 
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榀环 


傳 it while 循环 

结构比 for 循环 简单， whi.le 仍必须遵守格式 : 


f6 titm 卷山* 。 



Action 


} + □ 



行幼代尨令边农 i ‘巧為 
0 — < 鼓 4 D 会） *4^0 



法蠢 f 


小心处理 while 循环 
的测试 条件。 

因为 while 揭坏没有史新 
循坏的内炅代码，你必柚 


确定埤钚里有影令测试条汗的毡序代码, 


否則，就有创建无 f 1 艮饨环的 H 險 . 



垂新设计电影片头习题的循环代码 t 它提酲 用户输入大于 0 的数字，然后从该数字倒教计时 , 
就 ® 老电影的片头 - 样 « 3 , 2 ， 1 ，开始 t ) , 这 - 次用 while 循环改写 fo 工塘环 „ 

v*Lr count = prompt f Enter ^ number greater than 0 :", " 10 14 ); 
if (count > 0) { 




) 

else 

alert ( fr The niunber wasn't greater than 0, ,No movie for you J ")； 
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习 颺 解答 



垔新设 计电影片头习趣的循环代码 t 它提 P 用户输入大于 0 的数宇，然后从该数字倒数计时， 


鱿像老电影的片 头一样 （4, L l t 开始 [ 


这一次用 while 循环改写 for 循环 t 


fPiinr ■定 




M 缚用户餘入 
數言。 



var count - proinpt (* Enter a number greater than 0 ： 
^ if^^ cQunt > 0 } { 


10 " > ; 


r 

辫敖 s , 任切 
i 子 wAi£fi 

JT - 外。 


varx ^： count ; 

二■… a f 



制數 i 0 


X -: 



…… 



郝分基个4 


while (x > 0) { 

alertrStarting iti..'' 4 - x); * 龙 4 忠 

- - j. - * - v - -” - - “■* i. J - 1-ft. - i J - ■• - ■ “ JY “ b.ia“j“s ■ dj.dj.il I, II I. ■■ I. J !•■!“ “■■■ K j 1 . j h ■• ■■ J kj_j i. .■ ■ ■, ■ J b j b I a I a L a i. a i. j i. j i. J 

的-郸分, 
., M? x— x— t 


else 

alert {"The number wasn’t greater than 0 h Mo movie for Vou3 1,4 } 


>!• c 

C . 


T 含鸹的轚翊 & 

He Att mb*r W*sirt grtiMf lh.fl 0- Ho ffWf\* lot^ut 


制盘诘采 




复习要点--- 

_ while 湄环一茛运行一段代只要某个閿甙条 
件推抟为 true . 

_ 确定测试条件能够被 v/hJUe lS 环代码影响，以避 
免无限循环 D 
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循环 


选对循坏 


电影的 倒数计 时习题砧尔 r for 与 wMleM 环通常 n | ■解决相问问题, 
枣突 上，忏何 for 循环都能使用 F 列形式获组为 while 循环 s 


1 jnic i + r^i 

whrl :\ + Cl~^ + 1 Test ~k 


while 循环能达成任 
何 for 循环的任务， 
反么亦然。 



a 




□ 


初始化盎芏在砵坏奸 


技术上，使用 for 或 while 邰能设计功葩和同的循环。即使如此_ 
你将发现许多状况 K , 丼中 一种 循坏很 S 然比另-种运作良奸。也 i ■午 
^ “优雅”有某种关収？ 




\ 



for (var i 
alert(i); 


10 : i ++ 


d 步踔用子 
达们蚤 t Hi ㈣ 

向坛. 




while (!finished? 
doit U f 



: £ 有 i ^ 


选择 for 沏环或 while 楯环，都是关于使川正确工具的工作* 
换句话说，循坏机制应该适用于手边的 T ： 作。 
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for 与 while 面对面 


麻蕕费话 



今晚 主题： for 循环与 while 循环努力地 
自我重复 


For 循坏： White 循环： 

啊……又是 H 复一 符重复的老友聚会， 

是啊。不过栈话说在前头，你邵些工作所韹的不 
同步骒 T 我可是-点兴趣都没冇。君起来真是复 

杂! 1 

我一点都不 复杂， ） i 是加 r 一点用于创违特定循 
坏的结构。想以循环处理某些数字计数器时，因 
为找能让初始化与更新（控制我的）〖十数器变得 
简单，大家郡会觉得安心 . 

没错，化循环不 是只有 t ! 数，这世上 有若各式外 
榉甚至与数丰无关的循坏。 布时你 只娃锯耍简单 
说出“继续做这件亊”。这是我的循环风格 u 


听起来冇点模糊，虽然我觉得你的方式也能运 
作 4 权傾向 t _ 较为楮确的运作方甙——你也知 
迢，就是密切监视让我走动的计数器 a 所以我特 
别注葸在开始循环 前把肉 己初姶化。我也在铤一 
轮循环结耒时14我史新，以确保能如预期池运行， 
我鱿是忍不住想要像时钟一样_可能冇点楮准赉 
复强迫症吧！ 


我知逍述有其他构逮循环的方式，我只是基欢严 
格一点 & 


我 M 然想对你的 I :怍伦现喝夥， m 你也知遒 + 循 
坏还是冇可能运作得既可蛊乂可预测，，间时又不 
需一 t 刀公式化的初姶化与更新手续 flK ? 此外 n 我 
代码的状况逋常都不盅要任何初始化 t 史新 
也不釦处 义生 在行动代码里。我很满盘不用理睬 
正式忡 h ■^心 专注在循环的现状 - 
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循环 


Fo 『循 还： While 循坏： 

我觉得一切 都要归 究到风 格， 而每个循坏郎冇舀 
己偏好的风格，你 喜欢严 格保持对 循坏的 所有控 
制,而我对于_拧制"这回书則比较松散 4 

■< m a 好捫息就足权们都能以 自 己的方甙完成工 
作^我也知逍 . 对子简单逻辑控制的循环而言， 

我的风格有点太严肃 

你终 F 说了奸话！ 看来我 ff '】 还是能和平共处的 fl 

好话不怕多讲。你刚刚那句话讲洱具好。 

我想我 们述进 能和平共处的……哎呀，一直:乾复 
的本性难移 4 痣不好寇思 

别在意，我完全了解。这次谈话 K 愉快^ 


■p- 

X 犮离盍问既 

As ? 有麋祖 


问: While 循环看来非常简单。我 
有错过什么車点吗？ 

^ : 没有，你只要知道問单不表示 
薄跖戎冇限 5 换句诂说.你可能会 
对 while 擔环的威乃感到惊讶 ^ :艾 
错， while 榍环只由一个測试条忤 
与一段忏动代码奴成，担组成真正 
顺杨的捣坏 T 通常就只需要这些 fl 
再考虑到測试条件也能利用 boolean 
逻枓运算符，事请就史有趣了，不 
只如此 t while 徜坏的动作郢分如 
栗利用 ■! 合浯句 t 就能尽情包含你 
想要的程序代码， 

闷：如果我创建一个以 while 
( true ) 开头的循环，它能运怍吗_? 


^ 1可以……可能运作得太好了 
点 D 问超在干你剛刚创建『一个无 
跟捣坏，因为它的剎试奈忤永这是 
Lrue.j while 找坏一直賊到測试条 
件为 false 才佯止，但本例 停本下 
来。想想看，就在你读这 R 的时候 T 

无 rn 桷坧正在跑 - 一直跑 ■ 还 

在跑 …… 不停地跑 ……- 啊！停下来 
休息一下啦 (break)] 



； 循环的行动代码（括号里的程 
序 代码） 可能完全没被调用吗？ 

^ ^有可能 a f or 诚环和 whi ],e 拽 

坏的則试条件 需为 true , 才能开始 
运行仟动 代码。 所以，如策和忤句 
致初因某忡原因而失敵，行动代码 
自然不会运行，桷坧 那在开 始前純 
乙跳出。 

循环可以放在另一个循环里 

吗？ 

^:当热 T 以！嵌套桷环尤许不 
只一层的重 t D 现在听来有点奇 H 
忸这个功能很择峨！当 Martjango 
扩大应用到整问电彰陡时.我们再 
来进一步讨论嵌套掮坏， 
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// See if the current 呂 eat plus tbe n^nt two seats are available 
i f fseats fi] && seats[i + I] && seats | i + 2 ]> { 

/ / Set the seat selection and update the appectra.nce of the seats 


/ / Prompt the user to accept the seat 珥 
vat" accept = confirm ( M Seats " + (i + 1) + 
11 are available, Accrepti 1 H ) i 


through M + (i # 3) 


else { 

/ / The user rejected the seatsj, so clear the seat selection and keep looking 


// increment the loop counter 




笔上阵 


微坏 


里新设计 AAandongo 的 findseatso 禹数，请改用 whi 抚循环 
取代 ■ Lor 循环 a 并增加一个新的循环控 制变量 finishe 心作为 
透过測试条件眺出潘环的方式，而不是使用 br ^ ak 。 
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磨笔上阵解答 



磨笔上除 
解答 


重新设计物响吻的 fi ndSeats () 函数， 请改用 whUe ^ 

环取代并增加_个_御_变量 finished , 
作为透醜试条 ㈣ t 龍賴时. break . 


=.龙噠疔器 V + 菝0』子 _的数 
1' (卿）走 f Umsh£d T 




■£■ OfsW 的如妨 

m . 


vari s T Q t fjni 5 hed .= fabfi ；, r ,.^.. . .. 

wti [ le((j <, se 3 ts . tengthj [ && Jflnished ^_. 

// See if the current Geat plus the next two seats arQ availably 
if (seats[i] && seals Ii + 1] && seats[i + 2]) { 

// Set the seat selection and update the appear 丑 nee of the seats 


// Prompt the user to accept the scats 

var accept - corsf irda{ " Seats w + (i + 1} t ■ through " + (i + 3 > 
"a.re available , Accept ? 1,1 )； 


. ..... 

II The user accepted the seats, so we re done 

l .a b j a j. h I b ■ a i b i a i. ■ i. 4 i. ■ i ji I ■■!■•■■_ j ■■■■■■■■■■■■■Inn ■■■>!■■■•■ 

finished = true ： 


else { 

/ / Tiny user rejected thes ? f : 


so clear the scat selection and keep looking 


H Increment Lhe 1 oop counLer 


■S ^ '4 f —d ^ iTJl , 戎 4 保 

〉 ® M 个料亡乃砀 ㈣ 泽 
件 , 扯 ti Ttf i^k.. 
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循环 


Mandango 加上街 If 涪起來 m 错，不过亀 
彩校雎对不 只—埤 我们襄 想出 虹钶处 J 1 
更多琲曄位"，… 


龟影皖座位数掩建糢 


細 on i 井得对 Mandango 确实需耍处理迟多排座位的能力，才能哀 J£ 
派上爪场。 mm , 一排座 位就已 足够 T 呙为刚好映射到一个表示庳位 
的1>^^ 19 数绗 # 想扩 敁成很多排埯 位，怎要扩桢数组——需耍另 一 
个推度 D 没错，我们在4论_-维 （2.D ) 数组。 


W —— 


mmmmmmmmm 

WPW 

Mmmjmmmtmmm 

■垂 ■ __■ ■■雌 






个座位。 





二趋&也的苫个 



0 

1 

2 

3 


0 1 I 2 I 3 

0 1 I 2 
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不只一雏 


数姐里的 数组： 二维数组 


创速二 维数组，不坩戴 h 特殊铳片或仟何装备。唭实上，创违二维数 m 勺创违 
一般（一维）数组很奥似,只是数 m 元桌換成多个子数组，这类 f 数沮胗成逭二 


维，制造出具有行与列的数据表 ( table ) 


芒光 i 磚诠 子典 汨的数 iiE , 6 绎 



v^r se&te = new Array(new Array(9), new Array(9), 


子发 珀 .. n 



new Array(9), new Array{3 > >; 





4 个孑 iiHS 杉硪 4 行的 




以 Mandango 为例，我们 tL 经知道 数组元 本的初始馆，所以使用不同 
方式创迮二维数组也算合理—— m 灾牵渉到数 m 卞商 w ： P 我 in 贤同时 
创建3初始化数组 T 这是个双焱的 方式。 


苷个中相睪痄出 5 


var s&AtrS = 





[{ falee t true. 




true, true, true, false, true, false ]* 



[false, true, false, false^ true^ fal 包 e, true r true, true ], 

E true, true, true, true, true, true, false, true # false ], 

E true, true, truej false^ truej false, false, true, fal^e ]3; 

广 4 - 

基个+ 裝趙节 f ! S 盘违的某 

的鬏纪素 Jj ， I 刳 
由0 J -) 3, 


iitsB - --达个 /i 


ttae 


ii 个 4 
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循环 


诂问二绾数组数提的两个鍵 


uiR :维钕组与访问一推数纟 fl 数据的 方炎: K : 实没什么不一样 t W 不过 
我 fn 要多提供一些 u 总： 额外数组的索引。说得迟褙确一点，你要 二？ 

指定行 ( tow ) 与列 ( column ) 的索以指出数据在数 组1 •的位贺 

例如想取捍第 2 排溶 4 张座椅的值,请使用 F 列 代码: 你有办法存 


較说中 第2巧的爹幻基 f 
(f #1铒岑从0丹姑） 。 


储 表楛数猫。 



alert (BeatB [1] [ 3] |f ; 



起轉 H 中弟 4 个走舞栌索 
?1 4 3 (章 q *4 法.乂 0 # 




出循坏处理一个多维数组，帝渉到为飪 一维制 作一 U 眹活循坏 # 所以, 
'二维数封 I 忠要沔 G 循环，其中一个彻坏在.另一个里阇。外 MM 环处现 
数 m 数据的 每一行 T 内 s 循坏_处搜每行中的鉍一列 

嵌耷付 £7軺 fir 你绔忐夺 



二 适教也 I 
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靨笔上阵解答 



以泯环处理二雏数组 seats 存储的座位值 f 每次遇到空位苈提 
y 用户。 


d 14 孑 i 述的长 

it , 赖定娉莱丨 H 
的子 ASEU 


for (rar f = 0 ； i < seats . len ^ th ； i ++) { 

. ^ . …… 

for[vari= 0 ； j< s^tsfr],length ； j++){ 

. jfip^^isn . . 

^afeSrSeat M +i + 11 in rcw"+j + "is available： 1 !. 

II ■ J UliUaCIDjh II. ■IKJII'II.IBIBIBIBlajBlialllldl. dl. BLill U J 1. J I •钃 l>JI I. .1 fa J b I fa J m I _ & i - !■- 




核相 /! 亡 4 它泛 Ut ^) 

T- A $ fS (tHtae) . ¥ 
I 现不玛的 


Ai? 有 》 碰 


： 数组可以超过二维吗？ 

答■- 可以 + 虽然超过到某+锃度 
后.数据就很堆形嗥化■了 n 三维敖 
组对 f 逹立现宪麩据棋央（例如空 
间中的 s - yi 三维座标}可晛很方 
便,，起过！1个啦度的额外 m 度1大 
m 都可扣 英为柞常独持的情况 1 增 
加斩的維度时，可悲成以子教 i 且换 
掉原本的元素（个别麩抜> , 


问:如果我在创建数组就己填入戣 
据、崗了初始化，事后还可以新增 
数组元索吗？ 

^ ： 圭然没问题^借由指定斬 
IU 居至未使 ffl 的教扭七 t . 你随 
时部可时数纽增加史多抚据 U 以 
My nda ngn 为例 ， 增加斩的子&组 
(軚纽索列为4> ,就可新增第5排, 
只需指派子軚纽至 seats [4 U 你也 
可以调用 Array 吋象的 push () 方法, 
在飫组兄端增加一仑斬 元素， 


:二维数组必须包含相同行教 

吗？ 

^ :没有严.格的需要„但请记得， 
如果麩纽的每行元素不相同， 
你就等亍自取艾难之道，因为嶔套 
械坏通 常都谖 计为处理一致的子数 
组长度 t 所以 T 是的，二堆軚扭约 
每一行的长度确实可以都不一样 + 
但是别百这个险比较安全 A # 
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复司要点 


■ 二维数组让我 ] 以表格结构存陆数据的 n 与列 


■ 汸问二维数组电的_块数据时，你必须指定行 
I 句列的索 

1_ 


箱坏 


»嵌套循环能用 T 处理二维玟组的数据 a 

■ 就像一股数组，二维数组能从数组对象 t 而陡 
创建与初始化 B 


2 - 7 的 Mandango 


虽然你已经处理过代码片段 ■ 汜 Mandango 要从--徘埯位成 X ?牯个电 
影院,索耍好好地审新处珅脚本才能适应二维的畎界。 


t 其萍个访球科长 
异. 方饨 st a 准括 
的二爺发戍 




■SSBiangt] 



MdhJdh^ti A4 tti 

終的 二 a 鳶龙非 
^.t 





当 Mondango 改成运用到存个电彩院的座位数据时，二_数纽将带来什么不同的影响？你又该卸沔把脚 
本可视化？ 
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这份代码不需要二维透镜 



< script typer 1 "cieMt/■> 

vaar seat 铎 ! [ false, tr'je r ialse, true, true— CalsG-, true, false | 

f false, true, false, faIs* B Ealsi? P tme, true, true ] 

[truej true, true r true,, f alse § true , false | - 

f Etij 合 r true, false, t rue # false, false- \ 

⑽才 = -1 ? L 

l\v 

V fr] aiV- 

function initS^ats(] < v/ p ^ 

// rniciaiii^ the a£jp^.^rancfl of all seats ~ 孝逢 f3 软 & 的 

f pr iviir I _ 0? i < scats ■ length f i + *> [ 


用妗苒下 F/rti Se 山边 
砰始為找 * /iri f 
诒体座作挾吞 & 


fynei ion f indSeatfl (I { 

/ / 1 1 ar e- .-aI i eady s*Iaei<=Hl P 

if ^sclS^at >■ 01 { 
selSeat = -1; 
initSeat£()? ^ 


fi thr user -accept the :? irAtsi 

var accept = con£ irm f H Seflts ■ + < j + 1) ■*- fe thraijigh 
■ in Kow h + I i 1 ) * a are available ■ Accept ?* \ ? 
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<tx>dy onload^ 暫 fltsU ? "> 

<<div stv r le = Trw3rgi n-to-p; S'SpK ； tftwX 一 ign 2 center 11 > 


cimg 

id^^seatO - 

&rc= “ 

ait= H - 

/> 

cimg 

Id="seat1" 

src=” 

alt = “ 

/> 

cling 

id= "seat2： - 

src= pp 

alt= - " 

/> 


i<3s"£jeat 

3rC= .P H 

alt=*- 

/> 

<. 3Tng 

id» H iieai 4 ■ 

src= " 

alt= B p 

/> 


< img id ■ ^ * $rc= ■ ™ al t = p 

ciTTig id-"seat6 fc sfC H ^ alL= p 
<inug Id= - seat?" src=“ alt，* 
cirag id='seats■ arc= -- alt= fc 
c iing iri= ■ seat9 ■ 210 =" ' alt=" 



id * ■■⑽ tW 

src= * p 

alt = 

n 胃 

<iir^ 

id="seatl 1 " 

&rW 


ciff^g 

id= '■seatl^ - 

&rc= ®" H 

alt: 

^ b 

■ciH 哈 

i.d= "seat! 3 1 * 

&rc= _ _ 

alt = 

■ ， 

<in»g 

id "seat14* 

arcs-" F 

alt- 

■ F 

<img 

i 占 - B s*Rtl5 1 

fgrc="" 

alt= 

■■ P 

<iinsi 

id= "seeit 1 6 *■ 

src- H?, 

alt: 



id="E-eat 17 h 


alt: 


<img 

id=" a-eat 18 ■ 

src= h # 

alt® 


< img 

id=^ BeatiS u 

src= n ' 

al t = 

_ H 


id? seat 20 ■ 

src = m ■ 

alt = 


< i mg 


arc 二 ， 8 

alt = 


<irng 

id=* 6 *At 22 " 

^rc = mB 

al t = 



id= i se£it23 ,i 

sre ^ a * 


II -4 

ciing 

id= m seat2A m 

src= h h 

alt- 


<.1 i?jg 

id= B Beat 2 S - 

src= *" 

alt = 


clesg 

ld= p seat26_ 

src=■■ 

all:: 

ti ri 


id= ,, 3eat27 B 

src= - " 

alt = 

• * 


ld 1 ^ H 3ea.t2S B， 

src="" 

alT ： = 


<;img 

Id,- "sear. 2^ 1 

arc="" 

alt- 


<imc 


3£-C = p " 

alt = 


<img 

id=51 B 

^rc- H ^ 

air: 


<imc? 

id="fi€-*it3Z fc 

BTC H 1 

ait = 


< img 

i-d="aeat3-3" 

Brc= H a 

■a 11 ^ 


<3 mg 

i d - 11 a eat 3^ " 

3rc= rf " 

alt: 

h n 

^ img 

id-*s-Mt35" 

J3rc= - " 

alt = 

"■ 


别被妆达两页 i 
的代码吓到了 J 


/xbw /> 
/> 


/> 

/><br f> 
/> 

/ > 

/> 

/> 


/><br /> 


电妇呔 f 并有 4 的、 
荔抝 9 个碴括 F f 

農 36 张 《*+ ”… ♦ 


这 M 使用相同的； 
二维数组技 .巧^ 
只不过放人 Mandango 的情埯里 ^ 
并加 h HTML 代码与围像（均 I 
trj f^ k http:/fwww.hefici/imki ： bs-Com/ \ 
booksfhf^rf 氨）。 


i 用户签下 Fihrf 

s*nts 狳 mjg. 调用 


<input typ^ a buLLOri. M id-"findaeats" value="Find B osnclick= 

</div> 

^/bexfy> 

c/htsftl> 


1 findSeats ( I f 


"The usrr rejected the seats P eo clear the seat selection ana Ke-ep looking 
selSeat = I: 


document • getEler^entEyld (" Beat ■ 4 (i 
decLuiienC , gecElementById ^ 1 seat ■■ 十 i i 
doc umen[ . gets lament By I d < ’ seat" t U 
tit>CLUnjfcrit ， ， 白 <^tE I tBy I ti B ^ t \ i 
docuF.c-nt , g€-tEl€?mentBy Id I "scet h +- [ i 


oeatalij .Length f j J) -sre = ft 3eaL_d ： v^il -prig H \ 
seats I i ] , length +■ j 5 ) .a It = m fwa i IcibJ e t M r 
a eats | i J . lengLh ^ j 1)) P sre ■ h sea t i 1 r png ■ 

! i I .Iftri^th ¥ j + 15 J P alt - ^Available Beat■ 
seats Mi - length + j ► 2) J - Ere = fa seat 一 a vail .png B 


docurfrent-getElementbyld 1 _se£3t ■ - f i W [ il, Icnqtln 


2)1.alt 


9 Availa.ble 3 eat' 


/V Increment: the Queer loop counter 


</3Ctript> 
苷 ad> 


芒次戧入闽®的，譌 
用 initSeatsO 必发， 


戋变连硝 ©懞 身扠妒亡穹 
吋.黨庳糾的碑茌 
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through A in Row J are Acctm? 
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， 3 討砀的宅灼踔 
众. i 巩仏 m 现沒 $ 汰 
lS Si 0 = 个遂的:吸 


mandango 壮汉乐得跳起探戈 


螯间电影晚的座忮都很有男人咮 

有了 •■ 维 数组的运作， Seth 与 Jason 能把 M a nda ngo 带人更髙层 

次， H 与令电影院范闱内的祕位搜索……而 臣診 为壮汉们设 Lt ! 
Ar ^ Cf 火们现在兴致可髙昂了 」r 















循坏 



JavaScript 域字游戏 

讲了这么多电影院划位的东西，你该不会想去 m 实地勘 
察—番吧？在你出门看电影前. 我们一 起做一下头脑 
体操，尝试一下填字游戏吧！ 



横向提示 

2.这种桷环一直运行程序代鸪，直刊满足;■刻试条件 
(测试条件为 true ) t 

4」使用这个语句可以跳出达一轮掮环 T 但链埃执行徇 

如果 _ L fl 为 irue 71 或 <l b 为 true ” ， Sl'Ia J _ b 为 true ; 

否 S r h a _ b 为 fatse * 

A 这种軚据类士能让你存栖多设麩据于单一变贵中, 
KV 堝环中包含玄复运行的代码的部分 D 
IL 诚坏中让饨坏准备开始的部分， 

!3.这种摘坏特？彳达合计数， 


纵向提示 

L 鸪环中必项得士 boolean 值的部分。 
i 明_访网扠组值„ 

5. boolean _运算符樣作 boolean 也返 

回 boolean (iS. E 

6. 揭坧中负贪改 t 任何诚坏椬制机制的部分 n 

7. 如果你想立刻结束调坏，就使用___语句， 

10. 知果 为 true ” JL u h 为 true 1 : T 則 a ___ 

b 为 Iruc ； 否則， a _ b 为 ft » ise n 

12. 以数乎访问数组值， t 要 _ fl 
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JavaScript 填字游戏解答 


JavaScript 填字游戏 
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Page Bender 


请垂直对折本页，模拟左 
右脑的区分，并解决我们 
提出的谜团。 


翥 


橘环和 电彩有 呻些相問之处 





布些电影的迂©情节非常出名， 
艰众？§不上电影行进的速度。 

笮些电影则使® 

大量劫作场®畈引艰众。 

疙论如何，电影轼 R 是电影 D 
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6 蚤数 





AA 珙* ff 吶…………鰱 R 黌 T 
® —次，我费个盅 猙粟吨 ©41 
的瑤 . 濟 * 教救典 f 


mt 重复利用 

* 祕再丽 





如果 JavaScript 里有整体环境移动的 状况， 将由函数领头。函数能 L 上你把 

JavaScript 代码变得 E 冇效率，而 li £ 能盱复使用 s 凼数是断向彳 T ■:务的，适用于组 
织代码，也是极隹的问题解决方案，听起柬函数的 M 历表不错嘛！审实上， H 有 
姑简黾的脚丰才与涵数 ® 组代码的优势无关 a 虽然很难 I 十谇每个函数的二迈化碳 
排放陡，但它彳门总能尽盘帮助抑本更环保一点， 
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分解大问囫 


闽遨之母 

迫根究 底， 网络脚本编程 就蘇为 了解决问题 D 不管问题有多大，只 
要思虑够周仝、计划够详尽，总会找到解决 方窠。 但如果问题真的 

很大很大呢？ 


世界和平 



解决“大™问题的诀窍，就在于将其分解成较小、较易 
眢埋的 ㈦ 题.如杲分解后的问题述是太庞大，再进一步分 
F 



继续图上的流程……再继续……再继续 
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函数 


见树35后知林 

继续把世羿和平的太问分解成较小的问题，最后终能小到 JavaScript 可以 
处理的程度， 


Shelter 




设想一个等 同千气 候控制议题的 i ^ Scnpi , 其中将包含动 
调节温度的脚本设计（用干控制 一 个环境的溫度）——最基 
本的温度调节器，只 W 个谅单的加热钮 （HEAJ> D 


姑 HI d 


诘件 . S , 温度调节器完全没有祸銪加热过程成原理> 按下 ^ HEAT " 
按钮 、 自然就有暧气7\ 气:候 抟制问题解决 Y ! 
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你吋知斟碌 Jf 沒 
只 ft 扣迮怎么打砰如 
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函数；小问鼬解决之 ii 


亟数，问翅解决者 

溫度调节器 Jz 的 " HEAT " 按钮，等间于 JavaScript 的函数 
( Unction ) ,原理 K . 实与现实的温度调巧器很相似——有人 
忠要开暖气，兩数就提供这项服务。加热的过程都在译数内部 
处理，两用蝻数的 R 码并不在盘如何加热。你 埘以把 函数想 
成 H ： n ~ r ——以息可以流人流出， m 盆了-内的寧悄都由 
盒子负荷， 困此盒 I 1 外的代砰完全没有相关。 


&数转耷 犬问瓸 成 
为小问翅。 


需要加热 



->变暖和了 


' HEAT 桉钮- 转译为 JavaScript 代码后,牵涉到调用 h 拉 t 〈） 函数…… 


需要加热-^ lieatO ; -变暖和了 


t'2.* ■+ Aliet) 人 4 

, — _个黹其璜敁如與过 



I 如何调用 k ^ tQ 基教 a 


heatn 涵数如何加热并非恃别 It 耍，甫耍的它足解决某个 ㈦ 题的 


自给 B 足方案， 解决问 题的细节而绐函数的内部工作处理 D 


// po soiTie Kea t soiriehow 


( i 三个沾占教宅威。 


shovGlCo^10: 


lightFireO; 


hau nessSU nil; 
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函数 


螽数的中枢 

选择创建函数的一瞬间，你就 成为- 名问题解决者。创建函数葙使 
m -致语法，能眹结函数名称与实际运行的代码。下述_为最 m 本 
的 JavaScript 函数语法： 
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索 # V Jl - [ * ttp ：// wufw . hradfirsttahs . com / booh / 
开它的脚不用几行就 能苍到 一个解 
本例为初始化电影座位的数据 d 以齐_ 




吨位初始 ft 的子问题 t 小到能以 一 今 读数解决， 


tunct icm >1 

// IniiL^Llze [lie ap-pei>raTic« oi ^i 
Far Ivar I = Or 1 4 lcrlyths i+ -1 J 

for I^v.t r j ^ Oj j ■ scatsji].length j j* ■ I 

a la^Lerairiu I 

U Set the EMt tu oiV 4 si. Ldble 

umeni .g«t ELc«72onr Ryldj m s nat ■ + \i 

doeuijitfni ESle 丼 ■enxByldl ■"seat ’ + 13 












习 S 解答 



在立刻表达函数的功能上，適数的名称非常1要。试苷帮下列函数命名，请使用小写驼峰式 D 




想要靠走道的座位 


要求退票 


— ► 


乱丢爆米花 



收到靠走道的电影票 

reque3tAlsE^«Eit(9 




收到退票的钱 

ge 仪 efundl <- 




—^ 



嗶米花丢到别人 

fhrowPopcomtJ 



S 充界多么盘名你遂 渑子这个幻趄 n iiJ 孕敁: J 小笫 跆碌式 
的甬4名# ,. 
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函数 


達立数椐煲多的湛度调节器 

回到温度调节器……它不知道何时该停止加热，因为我们没有设定目 
标温度，总之就是伧息不足，无法有效地解决问题，也就是说冇人按 
下了 " HEAT " 按钮圮,盘度调节器就一直开着……永远开若! 



洛 /lilt 旋 fjl 铢论弟户 


改良过的温度调节器，可接受输人饺椐捽温度） 
能良好地达成加热的！1标》 


111 


需要加热 



气温升高 


0W. 浞咬 4 虼入基 
致栌粒鴻:^ 


lieat(targetreinp)f 



为改良过的 hsatO 函数设计程序 代码。 新版函数可接受目标温度，并只在温度低子目标■温 
度设定时加热.提示；调用假设的 getTemp() 函数以取得目前的温度。 


申劫性 ft 诒 



function heafttargeffeivipK 
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习题解答 





为改闯过的 hear.[) 函数设计程序代码__新版函数可接受目标温度 T 并只在温度低子 S 标溫 
度设定时加热。退 示： 调用假设的 getT 却 Ip () 凾数以取得目前的温度。 


0耔度1琀基盅.作 
的在赵的 t t # □ 


fumfEQn bftatflar^tftifipK 


whik (getTenpQ < farftetftitipJ ( 


■^pTsoitte heatwg sow«bow 一 

■- . ，■… . ………………… .…一 万移::酱.故.发 办.咏碎 撕枝: ■ 

shovelCoattl ： 务件的一辟分。 

■ I ■ I ■ r <■ I « r a p ■» r i r i p i r i r i p i r i p t b i r j r i p i r i r i ■ i ■iBrsi rap- =£^ r % ™ h r t p i p i r i r i bi e ■■ r i si ■ i b i a y ■ c i 9 i a 


"ghfFi 喊 


现存. 冱裝 p 杏 e 苗的漥 Karneaa ^ uifin ： 

.度租 f C 杉去度 时.烤含 



传逯信息绐蚤数 


数据透过喊数的自变 S ( argument , 很像输人数椐）传入 JavaScript ^ 
数。再度丧#泊数语法 + 你看到函数创建时.自 变坌放 在栝号屮的方 
式了蚂？ 


掩号内9有 一 个 
滅；个 t ) i I 


function 冬 + ^ iVcime ~~^ + ^"1 ~~^ + ^ Ar'ym.rd. s i + Q + Q 







hi . itb^e^ 

t ) 4 f 犹缚 3 绞 5 t 威 k 诂化的要 
辟愛薹 

传给函数的自变龟数进并无实阮限制，不过试若把色变毋数 3 : 
维柃在两 . 三个以 K 还迠比较合理啦！你 可用内 变进传入任何 
数据给函数 T 例如：常 S (Math, PT). 变觉 (temp) 或字 
面量 ( 72 } , 
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函数 


蚤数 I )变曼作为数狳 

当敉据作为白变 S 而被传入函数 t 它的行为就像.函数内 Q 初始化的届 
部自变下面的范例中 T heat(} 函数获 得的 H 标温 度值， 就是以白 
变： ft 的形式传人 函数： 


e 杉潘盘 的數 兔― 丟—十喊 


在 heatU 函数 tL. targetTemp 白变造的 tiilH 方 ji!；， 一如它恐个初 
始化为72的局部变下间光以呈现自堡呈值的 akrt 枢取代平常的 
heat() 函数代码 a 



虽然函数自变珐的行为很像函数内的局部变眈，但在函数内改变钭变 
设，却不会影响凼数外的忏何$物 4 但这项规则不适川+作为亩变抵 
传人的对象——第9竽和第10_京将详细讨论对象。 




var temp = 00 ； 

cool 工 t [temp>; 
alert (temp); 


f 详入 CP od 在赵 

tf D 


jlEmpeTatii^ ft i *¥ ■ 

A 教蚪的 temp t 耆仍 
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以函数移除重复 


蚤数去除重 复代码 

除了拆解问! lih 问 si 的解决史为容易 + 透过彳 r 务的统合 + 邊数也是种 
极哇的削减重复代53的方式 p 统合任芳 (generalized task ) 可把出现 
在多个地方的相似程邝代码 f 以消除。即使这类稈庁代码不 E 得一梭 
—样，但多半总能统合为一致、可迓于函数中的稈序代码。然后，你 
就能以调用函数取代 钇制代 

以 T 冇三段不 M 的代码 ， 都牵渉到相似任务，所以应该能统合为可再 

利用的单一任务； 折扣栌不萊 tl 



上述 舛项仟 苏分别计筲了三张电釤票的折扣价，悒这些代务能统合为_ 


项 fr : 务——根据折扣比例计猝电影念价， 



冇 f 通川性的票价析扣函数. K 他三段代码就能改写得絞柯效韦 了: 



{f Senior ticker is 15 % 丄 ess 

SeniorTickui. = dt i kc ： oun t Price (ad ulLTicket, 15 }; 


// cMld ticket is 
亡 hildTi 咖 t : discountPrice^dultTic^et, 20); 
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函数 



Functipn fi ： nd.SeaC5() f 

// If seats are already selected 
iE (seISeat C> { 
seLSeat * -]； 
initSeatsfh 


// Search through aTl the seats for availability 

var i = 0^ finished = false? 

whi3e [i < seatSrlength. ^ Ifinisbedf \ 

for (var j = 0 ； j < seat s[il, length*j jf+ ) { 

// See if the current seat plus the next two seats are available 
if IseatsEilfjl El&l seats[i ][3 t 1] hh seats[i]Ej * 2]i { 

// Set the sea.n selection and update the appearance of the sea_ts 
selSeat = i * seatE[i] . length 4 j ； 

document-get Element By Id I ^seat" ， \i * seat s[i] rlen^th + jl-hsrc = 
document .get El enent By id] ^seat" ► f i *■ seat s[i] .length jH-alt = u 、 
document - g en. E1 eme n c. By I d 1 ^ s eai ." 如 l i • seat s[i] r length + \ * 1)) .src 

docupnent,getE 1 ernentByXdH seat p i- U * seats[i] r length + j ^ 1 )) .all 

document, get Element Fyld{ ff seat. H 和 li 4 seats[i] rlength 卜 j 4 2)) .arc 

docymem,,qetEleiinentByldl "seat p ， U * seats[i] r length + i 4 2 )) .alt 


"Th^ user rejected the seats 
selScat ^ -1 ； 

docuftient ..gei: Element By Id (*seat 
doc um.cn !： .get Element By Id (* seat"" 
document.qetElement Byrd^seac^ 
docurp.ent. get Element Byr<3( # saat w 
docu men t r getEl ement By I 
document r qex ?■；! ement By l d < ^seal：. w 






// Search through all zhe seat 公 for availability 

var i 二 Oj finished = false ； 

while £i < seats.length && !finished)( 

for (var j 0 ； > ( seatsti] - length ； +> { 

// See if the current seat plus the next two seats are available 
if (seatsIiHjl && seats[i][j 4 1] && seacsfiHj * 2])(. 

// S&L the seat sc lee Lion and updaiie the appearance- of Lhe seaLs 
selS&at = I * seatisli"^length + js 

ducuiSectt .getEl^SnerttBylcH + (i~~ w atiat. s U J • length~ + ~~jj.i.src = 1 

+ {i * aeat s ! i J 去 + 

f dociiTTieritTge^l^^ment Byld!^ + (I * Seat s [i ], leng!:h + j 


r seaL 


dacQincnt. getEl err.enL By Id (* seat # ， 
Ho^uiflen^geEh ： i eEtiei: l by i-a^ ^scac" 4 
ci-:n:um^rLt ： -U£ ： LElern^i3LById( 4 

c. u m-s nt. g etT^rnen^y^T ^ d t * + 

docyni-ent.get Elesnent 3yld( u Seat # + 





函数 


釗建设定座位的&数 

Maiidan 糾的壮汉们现在察觉 r “效率 rt 这网箏，他们 iEtt 若加人可 
Lh 拖位设定更有效率的兩数 （ H f 全 http ：// www . headjirsttats . cofn / bo ^ kii / 
栽代码 ） 。不过.为 T 设 thetSMtU 函数，他 ff ] 凫的需耍找 
出所宙 G 变成*借由奄符各段审钻代码屮的信息 t 你 mT 以分离出必尨 
自变砍.仔细观察 findSeatsU 珀数的亟复部分，焊出下列自变 賦： 


座依缒号 

为每个吨位设定的编号。此非数组索 
引,只是从左到右，从上到 F 讣算时 
的座位编号，从0开始、 


由 T t 的代踢中抽 
入 6 nJS * qtO 占裝 


推 Si (Siatus) 

座位的状态;^空位' Q 告位、 d 选 
择 n 用 F 判定黾视的痄椅阌像 



^ 饮明 ( Description ) 

庵位状态的说明，例如 "AvaHiiblie seat" 
( 空位 ） ■ ^Uruivail able seat 1 (ii /，） 、 
l Youf se^r ( tl 选择 ）， 用 -F . 设定痤椅阁 
像的 aU 溪性的文本 a 


笔上晬 




设计 Mandarrgo 的 Set 5 eat () 函数 B 
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磨笔上阵解答 



笔上梓 
I 解答 


使用？&数后，更0彔、更清较 

的 Mandango 

相似 、 置复的代码拆解成 set sea 函数坫 _ 也大幅商化了 

滷数。共有6次对 setSeatU 函数的调用 s 以程序代码再利 
实为足进展 tf 


// Search through all i.h,e seat a for avai lability \ 

var i = & # finished = falser \ 

while {1 <： seat a. length ^ J f inisbe-d? £ 、 

ion Wac j = 0 ; j < se^its[i].length j j( 

" 耳 1 1 the trvi c"&nt seal; plus i he next lwo a^at^ ava i l^ble 

if (Eeata[i] [ j] 44 seats[i][j + 1 ] H seats[il [ j * 2 \ I f 

if Set this s-^at selection and updgt^ the fippesr«!lc0 of the H0c?ts 
selSest = i * seaLs[i].length - jj 
f • b eatB[iJ,length + j r w Y&ur Boat #r ]U 

J a*tEeafc{i * a adt a [11, +3 + 1, w fl®laeH m Yqmv aeAt w Jj 

\ set Seat (i * BiB«tB>[i] T lBngtb 4 j + 2, w flelBC , fc H l i w Toiir seat" 1 ); 


// Incremient the out^r loop counter 
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函数 



但 sets 时 t () 函数 不只对 f indSeatsO 有利，它也协助 initSeatsO 
更有效率，因为这个通数也仃相似的座位设定代码 a 


你召，一个还算简单、只有两行的幽数，现在巳子 Matidango _本中使用 f 8 次, 
函数的使用不 只简化了脚本 ，还 I 上脚本 E 奸维护，因为在你忠要改变座位设定方 
式时，你只盂改变一段 MtSeat () 代码，而不盅更动 S 块出现在不同地方的代码 0 
只要并非必铝怙况，神竹清醒的 JavaScript 设计者都不会想更改多处的代码。可维 
护性……赵 :件 好車1 


■ 函数 U : 我们钤换太间题至小问題 .. 小 N 题较 容蛣解 ■ 函数是种削减重复代码的极佳方式，因为函数里的 
决。 程序代 码能依你的耷厫尽怙 茧复使 用。 


■ 送数提供 f 分离脚本任务的軋制 T 而后再以可再利 ■ 自变量4你传递敎据至函数里，作为既定任务的输 
用的程序代码块予以统合 . 入 6 



尽* 问. 没关系 




X 没痔鏖商& 


:传给函数的自变 a 数里是 否有 
限制呢？ 

答：没有，但也算有，我闯签"没 
有"， KI 为并无硬性规定可以传入 
函&的自变 flfcf ， 凃非你把计其 
机内存的能耐也算进来„如果你伶 
入的自变 f 抚量多到连内存為哲存 
不了.我建议你体息一下，重新想 
想你在做啥，因为要有非常多自变 
量，才会对 rl 存速成问题.较实抒 
的限制釗与良好设计有关，也就是 
保持自 t 量数責为 T 管理的钕 f - 
函致 f 不会1杂详釓七八糟, 6 通常， 
最圩别使用超过你能控制的自变童 


1^1 ： 我己学到函数能把大问题变成 
小间题、在脚本里分工合作，削减 
重复的代码。它究竞扮演 _ — 个角 

色？ 

答: 以上皆是，在数，只推长一项 
工作.很多时喊..最好的通軚能同 
时达到！唢13标 = 钙决子问题.饪 
务分： L 合作1削成重复代码，,钊建 
同叶有 这些功 能的毐欸并非不可能 D 
亨实上， 这三个是创建而数时的好 
3标。但如莱一定要挑出特別卷重 
的 a 标. 41 分工合作"通常是单一 
南教 9标的最僅逢择：如果每个通 
欸都擅长一项:独特工作，伶的脚表 
将受盖良多, 


^ ； 让我再问 一次， 函数该放在网 
页的标头区 ( header ) 还是主体区 
( body " 

^ I 4) 数应该放在标头 E 的 
〈 script 〉 标签里 + 表放 在导人 円豇 
的外部 javaScript 文件里 a 

1^1 :如果真想用函数改变自变 M 
值.我该怎么做？ 

必玟总变 f 不能直招改变，至 
少 il 类改1不会发生在必欸叶。所 
以，如果你想改变以自变量钤入的 
ft 据，你需要返因為 fi 改变过的值. 
继续往下看，你将理解返网值如何 
运作 t 





六 R 雪： &数的反镄 



M 如舶 ngo 受惠于 函数, 向前迈进了 -人步，但溫度调节接口可没如 
此好运 fl 玷然 hwhript 的祉度调节器运 fl ■:不顺，裝叫冻偁的叩户开 
始怀念起以前的 h hfat m 按糾，永不泠止加热的 u tiEAT w, rm. 
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反锖的重要性 

多亏了函数 n 变蚨，我们的凋节器才能没定温度， m 它不会汇搰 nm 
的溫度，因为 a 前的 温度魁 决定罔棕温度的箪础 ， 它也很亟要:。另外, 
不 m 温度頃节器通常都汇报+同的溫度，叩使它扪位于相 m 地方 ，追 
报究底，我们耑耍反饴饥制……你需要加道 u 前的温度， I 能设定有 
盘义的 n 标温度 e 


u 0诱玲速度"枘$ 5 
y ； 角々成螫瀵 度的！ 

的!41 



温度调节蹯将定期兄示口府的温度 ，作力 盹助判断押.想溫度的反 

U1, 



所以 JavaScript 喊数真的需嬰返 FI 信息给调用呐数 
的代码, 





你觉得兩抆如 H '\ i 任砘被说服返封飪据？ 
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返回给调用者 


从函数恧回 仏息 伞涉列关键丰 feturn 的使用 t 关键卞 后接欲返回的 
饴息 ■ ： 然后这些数据即被返问给调用蝻饺的代 tit 



粒有泛切礓 n 



r 

#仔何你逸去 

栌數鸽 .、 


retiarn 语句能放在函数的任何地力% M 要记得，承数遇到 re turn . 后 
将立刻结束 a 所以， retuirri 不只返回数据 T 间时也负责结束函数。 
例如， getTemp () 函数即以返回实陈温度而结束，实転溫度为传感器 
( sensor ) 的读数 ( react ) i 

function getTempO { 


返馅愤能让你认 
凾数中 返® _段 
数椐。 



// Read ani*d convert the actual temperature 

var rawTemp = readSen^orO? — " 一 ~—’ 惑塞 數碑 的轉式冰較杀格， 

辟滅度輩 d 

var actualTemp = convertTemp||rawTemp}; 

耷 K . :. S 度噠用 1 咖 n 沒旬 ， 义 



如采你仔细回想， getTempO 蝻数[曾用 : 〗__温度调节代码: 


function beat {target Temp) { 

while (get Tempo <■ target Temp) 
"Do some hea^i 


.ng somehow 


^stTewtpO eS &>6 hat() 
tfb 时 hiU 姊 辽狃供 If ) 子靶改 


凾数的返设值取代了 

> ―~ - 

getTemp 的返回值取代 rgetTe . mp (} 兩数的 调用， 并成 Xfwhile 循环 焱数的谪®。 

测试条件的一部分， 
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很多快乐的返©值 

因为 reLurn 语句立即结束兩数、我们岈用它控制函数流程，还 
能附带返 ㈣ 数据 D 不只如此，函数也经常用返时消表示运作成功。 
heat () 瑀数即示范 m 时达成两种口标的机会； 


function heat(targetTemp) { 
if (getTempO >== target Temp) 
return faleef ( - 

while {getTemp(> < tsrgetTemp) 


ES 记择定 ^ actufiiTemp 咬？含技供 
5 jetT f 的 ® 任 9 


7 來晷仔何如游 ，碑 W 
达 ® # a 采 產逛. 


// Do some heating sooiehdw 





任_ f ^ Tt ^ pQ 的連 ip 免】 


return tru^j 


硝 t 扣於.达® t *44# ■葬 d 


heaU ) 喊数的示范 M 可有到 bmlean 类型的返 [ P 1 值如何控制幽数沭杩、 
以及如何指示幽数的成功成失畋。为 r 单纯的沭程控制、你玎以使用 
究全没有返回位的 return 语句，作为跳出幽数的方式^下例的另一 
版 heat () 函数 ， 叩不笳依赖指示函数成功或失败的返回值， 


function he at (t a eg etTemp) { 


if (getTempO >« targetTemp) 


rstuTus 



Wlimi 每句 讳軺 5 在盎. 
©七不# 其加劣 .， 


while (getTemp(J < targetTemp) { 


// Do heating somehow 


> 



&數仍 ft 孩砵豪的铐豪. 


return 语句本身能 
阁子銥東&数。 
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return 真抬数 


Return 

本周主题：函数脱逃大师的秘密 


H^d First ： 我听说，你迠个非常滑溜的人，儿乎能从 
任何情况 F 脱身 。 

Return : 没错。把我放在任何闲数中，我 Hh 就能从 
兩数中离开 a 我茲至述会悱走一埤数据 

Head F ^ t , 当你离开函数后，你去了哪边？ 

Return ; 这个嘛,别忘记函数都是由其他程序代码所 
调州，从函数返回 ( returning ) 只表示问到调用它的代 
此时,返回数据的意思是数据问到调 m 函数的代 

m . 

Head First : 哦……怎么进行呢? 

Return : 如果你把“兩数阔用 M 想成 荇结果的苫 
达皮' 应该有点韧助。如果由数不返回 ftf 町数据 ， 
上达式的结果就是什么都没有 。 m 如果阐玫典的返 ini 
/数据《极多岫数的确返阿> ， 衣达式的钴采就足一 
段数据 n 

HeadFirit ： 所以 ， 闲数如米只坫段丧达 皮， 这表示我 
们可以指定由数返 ㈣ m 給 - 个变; s 啰？ 

Return ± 不行 * 但又可以 fl 不行,在于函数本身井非 
在达式 —— 调 lii 通数的部分才是丧达可以，在于 
你可以丘应该经常利用函数调用，使其结果被指派给 
变 ^ 这钯就是农达式锌场的地打——估谇函 数閟用 
时，它被视为表达式，其结果則是函数的返〖0 | 慨 4 

Head First ： 原来如此。但什么都没返回时 t 我 达式又 
会发生什么事呢？ 

Return ： 如果你用了我,但没有附 L 返因值 ， 函数什 
么都不会返 hJ , 表达式即为空白。 


Head Ftfsti 这样不会有 H 题叫？ 

Return ： 没有、不会苒的冇你耍知道，大家 H 
在函数可以返回数据时担心函数返冋值，如果函数并 
未打算返凹任何东西，阼也+应枏心 f f: Hm 返 H 愤有 
关的行动， 

Head First j JMl 冋来淡淡你的脱逃拄术 D [ Hilk 岫数 
的 A 然执行过程，这好像不是好事喔？ 

Return ： 不见得，让我说明因为一个函数冇第 
一行和敁后一行，不丧示它的设计- •定 是从奶一行运 
行到黾后--行，丰实 .!：， 认为纳数具有开始5结朿， 
本分就足危险的想法 =■ 函数的 " CJ 然”结朿很可能在 
代 ㈣ 的屮段 + 因为苽叫老奸0：搰的设计师把我放在 jR 
偷的 地力、 

Head First ： 听不太馑耶……你垃说，某些函数代码始 
终不呀被调用，也 m 正常吗？ 

Return : 我可没说“永远 " ， fft 函觳中通常有数条不 
同的路校，我常常协助逑选各个路砼。如恥发屯厂萬 
4隹，指示硇数不该继续运行 T 我可 am 荇给它從早 
的出 「 U 在其他状况下，闲数也可能-路运 h 到砬后 
一行，抖罕还没遇到找就离开了；或者也叶能因我 「fii 
结束，听以我才能返回某些数据 u 

Headfirst ； m , 这样子啊。你能提供一苎选择_娜 
返 回数据 与控制函数执行的谏程。 

Return i 不错嘛!你抓到袁点了! 

Head First ： 哽嘿哎，我在这方面的反应不错。谢谢 
你过来与我们聛无。 

R ^ turii . 我也 很高兴 ，不过， 我岌离开了! 
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被破坏的代■码，并弄洧楚 WARM 的商围。 


f unct icin showC 1 in'.sr sM&g () v 
return ; 

alert (construcr.MeSSage(J^ 


r 

嘯印的兔踌.专 


function con&tructGlisnateMsgt ^ 1 

var msg ■= _’-■ 

msg += ^ Global " : U ^ Loca 1 -" : 

if (get^empO > 30} 
msg += ^waiTEning*; 
else 

msg -coolings 

if {true) 

msg += " is not 

else 
msg += 

if {getTempi l 1 7 0) 

return Risg + m 'a hoaxl # ; 

else 

return msg 十 ^realJ "i 
return "1 don r t believe it ’； 


f Liner, iofi- getTempO { 

fl Re^d the actual te^iperatare 
var actualTe^p - readSensar(j r 

—J T~l f% ■ 


AdCTJC H 鉍人 t 


JavaScript 发现自己突然身陷气候控制的丑闻中 n 11 反快速加热联盟"[又槔 WARM ) 
的成员自己写了脚本，宜传关于局部暖化的信息。但 1 ■生气又厌倦变冷的负责市民组织 " 


( ARCTIC ) 则决定 BE 制 WARM 的信息，动手破坏他们的越本 t 你的工作就是分辨出正常与 
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匀题解答 



JavaScript 发现自己突然身陷气候控制的 H 闻中 a u 反快速加热联盟 15 (又称 WARM ) 
的成员自己写了脚本 F 宣传关于局部暖化的信息 a 但“生气又厌惓变冷的负责市民组织 T 
( ARCTIC ) 则决定压制 WARM 的 信息， 动手破坏他们的脚本。你的工作就是分辨出疋常与 
被破坏的代码，并弄溃楚 WAFiM 的意 


返. 矽# 定耔 
沒皂片 n 箝知) 




I *— e[fe 句彻政祀 
i 冱教鉍用&砬代铒 
鰣 W ■汶节3由係结 .. 




SStr 扮 

Cffld 

詉我 f 
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回到 Mandango , Selh 与 Jason El 经+想杯听那叫改免气候的鬼话, 
他们已羟磨拳擦羋，准备逬一步改#自己的_本，有些用户说 h 他 
们老是搞不溃楚跑椅阁像的颜色冇什么意义，希诏能有 u 点击座位即 
寸迕询是杏为空位”的功能 e 听起宋 Mandsmgo 需嬰新的功能（硝数） 




getSeafSfagust 】 焱数冰箱磁铁 ^ 

Mandango 的 get Seat S tagus () 函数缺少一些重要的代码.这梓将无法找出特定座位的状态. 
( 函数首先检査座位是否为三个连续的可选择座位之一。如果不星，则从座位的数组里检查状态是否 
- -— 为 “ 空位" （ avoibble ) 或“已售 GT ( Lmovaibble ) ,话使用下面附上的代码磁铁完成逸项练习 
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getSestStagusO 函数冰箱磁铁解答 



gefSeatStagust) 函数冰箱磁锬解答 

Mondango 的 getSeatStagusU 函数缺少一些重要的代码，这祥将无法找，出特定座位的状态 a 函数 
首先检查座位是否为三个连续的句选择座位之一 t 如果不是，则从座位的数纽里检奄状态是否为“空 
位” （ oviiffable ) 或 H 已笆位 71 ( unavaifabk ) ,请使用下面附上的代码磁铁完成这 ® 练习 t 


■i ■晏变 I S “ StAt 的佯 务一 f 时. 


戧 1 D 4 公遝闷一與的三个连该违辦以必拓 螃奎其 
个達沄和戏下来的呙个.变圮。 


function get^eatStafasiseotNuniJ { 


( \ aelSea^lfc 1 = 



4 1) II 



return. u yours ff ； 

else if ( r^t^[H^h.£loor( 
return '^vaiiame^r 


else 

return # ufLavaliable 


4 

43 J 座仿 杏盎诏 i ： 的行盘（座记 
鉍爭铨 以一 H 的泫 6 銮 I 无糸 
磚旁去£ m 


, n 沒括在鬼砠 f 的列盎 
(座泛铒芩除以的瑾倍款 
$, &余蛊） 


違 < 9 > ,任如|敁变 j 
Sflds 枭组约長度舭含吏 
蛀。 


显示划忮狄态 


取得划位状志确实方 便1 但让用户查洵任何座位状态 t 表示盅在用户点缶迚位 
时呈现其状态。 showseatist ■.的 USU 函数提供这个 问题的 简畝解决方棄 s 它把 
繁茧的 T - 作交给我们眺方写奸的 getSeat . Statusf } 函数， 


function BhQwSeat £ tatus { seatNum > 




^lert^This seat ia^* + get Seat ^t^tus (seatNum) + * / . H ), 

1 




3 


章符津和 .1. ii 
座倍块 6 的作矣 u 
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函数玎乌铵像 M 接 

把这个函数与 Mandango 网扣的座椅 ft ] 像接 t 线，用 Ali 卩可透过点士 
[司汝而迕抑座位的状态，毎个图像必须冇个 1 i showSeatStatusO (^ 
数联系的 oalick 芈件，如下 所示； 


<img id= H seat23" src-^ w alt=" 11 one 1 i clc= ,J Bho wSe at St atus £ 23 > f J " /> 




想知道采个庞位的状态 &_h M 需点击-下歐标 + S 现状态的 alerts 
便会弹出，对于不太会分辨座椅阁像，希望只要点*菜个座位就能 
取得状态的出户，新功能实在是一大利好、 

^复习要点--- 

■ return 语句 Lt 兩数返同数据给调用函数的代码 6 ■ 函数只能返 H —块数据。 

■ 函数返回一段数据 Hh 数据将被放到调用威数的代 ■ r eCS grn 语句亦河不与任 H 数椐间 W , 黾纯用于提 

码中 - 早结束函数„ 
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锃化结构代码 



重复的代码綫非好事 

ManLJango 脚本的运作不错 t 但 Seth 
脚本的问题 fl 尤其是 j as 0 n , 他做 f 
应用稈序多串受益千分离 HTML . Jav 


开始拍心长期维护 
■ 发现敁新的网络 
CSS 代码的设计 


ii^ty oal-od'i;-' L.n Li 5«di si \ r - r 

•■41V fe.^^r -rt I . .iri:. -i-rl i^-r "> 

<L^jq 3d: ■idM.lfl' - a nr ■=■■■*■ ti JL ; uh^ L J.C - B filT^iy^tiil.l Si ： u L uii IO^j ^ _■ > 

-■ Li»g jil/flCiLl* src- ■ - ■alt ■ “ ojicJ ic ： t? ^s-hciw^tnc Strti aai! U B 

■^lnq ] ^."'■vQiflbr ^" srr- ■ ■ riii~. vn '■Hkii>vf?H_t5i.iiiiLiiiidM; ir /> 

-_ Lmy jJ-^a-uALj* !*=■£： • ■- Alt，** <H：iC i ick - ^ Q^Mi3£^L2L^LUa l3 J : * 

■ ITHI jd'-'Mac.fl-" arc *-■■ ■b2c«" onr! ari -■■« 味《 5 罈的 Si f “51 母 1 論 ，_ >■> 

< : nq I wri== ■ ■ u. Jl, B，r aril ； L i £:h B Hhi^wt^JiC ill Jil ud I b j; r 

，■: itifl id'-s-OALS®- arc-* 1 - fl]L-" J one I J rt - 11 c Si ai us 16 Jj B, _■ 

■ ] pig ■ k rr " M ] i . ■ " nnf I, j i'fc. B j«Kc:wfV4ULt.rrz Hi u h ) 7^ | r 

■£ . nq iE3„ B 3Kiiil.4 E Krifir HB ^ Ltr " ' *fic 31 eh - "'S riO^iL-iLS 1 ： liL Jfi iB I.- ■■ V.-^IkT 

d&ij id-^it-an. J- hic- b ~ Jti r - ■"* Dnc]ich- -B B.Tio^.?< 4 atfir.aL j ■: ■ V> 

-,jna- Ld-^-seatIfl" stc-__ ■■ rs^cl BC-k.- J, ^h™i；piiBc Sc a »： u^cLSj-； - t* 

<inc ： id^i'jirpV ^ l B kciu ] Ltk ^ T iih^ > A^L-AL£LAL'ja 11LI ? 19 ■"> 

■cine 12' ixU dlL' ?a QRC L irt- - BhCM£^a.teL4Ui3 112J I * /> 

due Ld- a [sea«:lV BFr^*"or---1 «».h-b 11J3:* ■：> 

■ ir«Qi id -■* 5>f HT 14* ^rc*. ■ ■ rfc I •■ , r B ecir 1 ick,' r u hriWilH-JiLilE JIE i 14J ; r .» > 

■c jn^ i^ p h j e ■ * ~ uLL-> ■" Dnel j Cjl^ E-I dl.il 5 ； S &! ■: * s - 

*il¥g Bd ， e bffid: ]6— BUC- “ JL:- “ iHIlCj LCfe-- , *3.h«?W5Mr BCfli ： -il&< Lft I.'^ ^ > 

<leig id_»_DeatlT_ sre* -- ■■国 isfirl ic ： k_"*.lh(?wS»ii^jstptsi*^L73i r" 

■cirTq : !£l B »rr _■ d]L aa aftCL j i ： k - a ahi^Sc^LSt ALiiSI ]BS:* /：■ 

<1h-^ 5 ^-"acaiI? a *£■«:•■- 11 ale - a * onclic i k_ a BfciG^e4cSt"»tUBl i nii ■ /> 

Ji ： I iT-g «rc ■ ■ *|fc ,-*， {Tnr] tek "'Mlirw.'nVuflL^L^LuriLI tv 

<La)9 JL b hcu- - r - ki jL -H otw?L icit■ ^Blvjy&CAtSiatu.«I23 Ji : A /■■ 

^.Ljfg Jd^’frcacJi* «re^ B-i ^L:-" wnclLCh-hliipwEcB:E?r0tuii ： <37S"j_ 

■ L VW] JLd-^i.e *!： 31_ SIC - " ■ 4 L - - nnr*1 Lrh^^xhnwJiwflti；? uIL-jh^ ^ > 

^ Lng i^^ ,a HPi4iLJJI B utr B, AlLc" - ufiC !： LflC - p Shl^SoaLSLdLliiC t : * /'• 

< L n3 Idr^AdAtla* fiiG' - " a Lc “ OTIC ] L«Tk« J ariW-5Mt SilflC iJaCiilh * 

^ aP9Q Id-tre- ■-■ A Lc*-"* n- 11 ： | J rk - B- »'hrvw.5p.«LdSt«LuRl jfi | ,： ■ .' xbi 

c \Fig id* J '5Wl ： HfC ： ^ JiLl j bb dii£' I ^ i^A- Sr. ciC u±i?7^ : ~ f 、 

< si55! Ldz'flirALlB* fli ：： r，_ ait， sa oncl i ck • -shiawEeai; Si az u-s !3-S|i j * - ■ 

<]nu- arc-** 33 l-" orw:L 3 r*£■ s*ni?!* ! > 

^lir^ Ld-'se-at 1U B B-rirs-** . 1 11 ^■ ur»：L jt-k ■Hh^&fkAEfiiiVuui^Di： ■— > 

■sinq ； i.^ = B Hiviit2J. r is-ss" - aLc-■*■*■ wic]■Lch^ _ shCFwSea! ： *S<:iiEU&(31l| ■ 八 

<lii^ Ld^ fe Bftac32 B 3ic» tfc die- -11 *rc'.I cH-■ Bhsr^SPii ： 5r *1 m,bI l : ■ *a- 

.ii?g id ■ ■ seflT 3,J ■ <■ ] I " ^irx: £ j ivlt - ■ ahuwSn 魏 I. SL4l_u;a ■ !531 _■ ■ »' > 
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函数 


功能鸟沟窖分离 

鹿杂各种代码有什么大不了的吗？它不是运作得很正常吗？这 m 的问题主要在 
干你不泫把 hvaScripl 驱动的网页视为网 SL 应该视为应用程序 (application) s 
IF 如任 M 良奸 的应用 程序， ■la^Scdpt 应叫枵序也间样锘要仔细规划 》Tf 设计，小 
心驶得万年船嘛，更 Hi 要的一点，当内容、外观与功能分离时，以好的应用程 
序比较少有缺陷，而且比较容易维护。从 Mai^ango 的现状柬看< 它的内容 .. 
外观、功能全都乌漆抹黑地搅成 r 一团„ 



户费 __ 

内容就是例 lO ： 的 htnTl 代码 
它提供网页实陈上如何拼在一起 
的结构、同时也1网! SI 数据的家。 


内銮. PI ' C . 功較的分 
產. 9 龙天冏逋交功蚊.> 





外现 

外观就是网 M 上的 CSS 代码，它妆点 
内容的外表，决定字体，色彩，甚至 
可决定排版结果。 


功辉 

功能就是躯动网页 h 带来交互性的 
JavaScript 代码,你可以把这部分想象 
成负责工作的网 5U 


诮用这种力_ 式看待 代码分离的汉 题、 假设 S^Lh tj j aS on 发现一投 
非常机 W 的座位搜素代码，若想改用新脚本，他们将葙要全面翻 


分离功能乌沟容， 
让网络应用程序更 
容易 逮交乌 维护。 


修 Mamlangt 但又得胃荇弄坏网页结构的危阶，因为 JavaScript 代码 
与 HTML 代码太相亲相爱了,整天都黏在一起,如果 HTML 代码能够 
独立， JavaScript 转换成 HTML m M _ ㈣ 粹留给 JavaScript 处这个 
世界会更好 B 





你鮝如何料用必数从 Mandango 的内容中分禹功能呢？ 
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数据=函数 


蚤数只是数椐 

为了有效地分离代码，你将?衫袠理解函数与率件联结的方式，目前为 
止，我们拙是.利用 HTML 的厲性 1 卅冱有另一种方式，大多数人都觉 
得这种混合] avaScdpl S HTML 的新方式比较髙级：这种联结寧什-处 
理器的新方式，忠要我们用不同的角度看函数， 

函数只不过是变量 T 够惊讶了吧！我没骝你 + 线的 B 其中的_折在于 
把函数中体#成值，函数名称則为变董名称。下例是各位习惯的看待 
函数的方式： 




function ehawSeatStatus(seatKum) { 




alert < "This seat + get Seat St at us (seat Num) + 


上例代码没有 IH 题，不过来看看另一种创迚函数的方 


式 1 甚數名枋砟忐定雀 

_^ - - 名移。 

var ehowS eat Statue - fusctiontBeatNum) { 

alertt^This seat is" + getSeatStatus(seatWjm) + 

备 數主 沭则盏企蓍從_采床这 
葙 蓍 (iknftioM iiteinQ u 



这段代码 SI 示了函数也能利用变傲语法 rfri 违立，甚至构成元件也相 
同：独一无 的标识符（兩数名称）.值（喊数主体）。当响 数主体 
单独出现而没有名称时，又被称为函数宇面 M (funclion literal ) p 


这个关+碎数的秘密有什么好玩的叫？其实，记揭竑 f 涵数能像变进 
般被操纵的亊实，例如说…-1你觉得下列代砰有什么功叫？ 


v&r myShowS eatStatus - shows eatStatus ； 



冲朵 sArt W ^ £ s tilljiJ Q 去教给走 
署 SJiojuSf j f Si ^ s 

fl 
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函数 


调用或引闲你的&数 

指派函数钇称给另一个变 S 时， 就是让变敏访 IH 函数主体，換句诏说.你 
可以用 T 列方式设 It 代码.以便!周用函数： 


alert {my Sho vSeat St atu 甘 (23)) 



tltd 扣 tStfl 如 H 來用 

样浓铪它的# c . 闭备數 


调用 myShowSeat Status () 兩数的结果正与阴 /HshowSedliS tatus < ) 相同 t 
闲为两个阐数说后都引用 （ reference) T 相 M 代码。因此，函数名称也被称 
为国数 5! 用 (iunctkin reference) 

shows e at Status ， function。{ 

niy Show Se at $t a.tus 

}f 


&数其实只是 

“值”引®到洫 
数主体的変 1 。 


K 引用由数” 4 “调用涵数"的差別.勹函数名称后垃否附有括 4 () 存 
关。函数引用 r 会踉独 出现， m 函数润用則必定 g 随括号 t 很多时候 
述附#自变证 。 


运 f々 itt ^ SAeiu-StfatStflCiisQ iS ) ^ , 
与 fhoivS 找 t 包 tatKf () 相的。 


var myShowSe at St atus 
myShowSeat statue { 23 ); 


- ehowSeatStatus; 



试分析下列代码，并写出 dert 框中出现的 数宇。 

Eunct ion doThis(nuen) { 


在麇？|用 & 


nunn ++； 
return num； 


function doThat(num) 

num-'-; 

return, num ； 


var x =： doThis(ll )； 
var y = doThst ; 
var z ^ doThatJx )； 
x = y(z )； 



y = x ? 

alert {doThat (z ； - y ))； 
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习题解答 





试分析下列代码，并写出 Qlert 柜中出现的 数宇, 


[unction doThis{num) 
num,+ + ； 
return num ； 

】 

funct ion doThat (num) 
num~ - ； 
return num; 

3 

var x = doThisdDj 
var y = doThat; 
var z = doThat (xj ? 
x = y (z ); 
y = x ； 

alert {doThat (z-y]) j 



As 寿癱雕 


分离内容真的这么度要吗？ 

簽， 没错，识义不見佴，对 
闾单程序而言， HTML , CSS , 
hvaScript 全 都办合 A — 起不 iijL 呼有 
叼题 # 苦在皎 I 杂.用到大量代码 
的应用枉序！.分禹代码的好处才 
会突显。面对大型程序时，我们较 
睢掌搓整体状况；也就是说，修改 
大觉楛序时比 US 易出问题，尤其 
在不同类也代碼都况杂在一起的状 
愔由清楚地分萬代碼，修改 
功能时也可比玟安心 + 不会误触 H 
萸结构或叶現，円时 T 不科领域的 
专家也能同时处现同一个喟民 6 


例如 T R 站设计师处汊結构与 
程寺卟吨的同时，无需害怕造 
成 JavaScript tir 致代码的锚误（网 
站设计师 T 能不僅 JavaScript 代码 )■- 

P 5 ) :如果函数只是数据，我该如何 
分辨函数与一般 变置？ 

答：或故与“一般"变责的1异， 
在于你如何使用啟据 t 与杂数相关 
的数据（或代码） T 被执扦，想执 
行函故时 h 你就在朵軚名称后加上 
括号 （ h 如果毒数需要自变寺 ，也 
要记碍附上， 


^ ： 函数引用有什么隹要性？ 

答; 立数不涞一教变董，变量将 
其致据存铽 成存槠 器的某 个这域 
£的值*為麩則存储对代码的引用 
( reference ) a 所以 * 备 St 变 f 的值 
不是代码本彳 t 而是指句存储代码 
的存储器■位£的引用 有点涑 地址 
是你家的参考，饵埯址本身不等于 
你家 。 

函教汶用引用而非夹际的值 T 因为 
比起存诔多份毐数代码的副 本， ■?! 
用有效芈多了 t 当你指诹禹数给事 
件处理器时（等下就会用到），其 
实只是指派对屬&代码的？ 1 州，而 
不是代码本身 d 
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函物 



不过.脚本调川涵数的方式不只这一种。兄一种办式称为回调函数 
( callbackfunction ) T 就算你没有直核操作 T 也能闼用函数。 
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—皎函数 V . 回调函数 

麻耱费话 

今晚主题；一般函数与回调函数的 It 锋相对 


_般函数： 回调 函数： 

想必阼就是我敁近常听人京说起的那个不肯接受 
本地调叫的神秘人物 D 你为什么这么髙傲呢？ 

跟态度尤关，只是叫途不問 s 我偏好抟受外来的， 
遥远琦地的阒埘。 

你垃指浏豇器之类的调用吗？ 

以为你不塯 m 我们这岣每天与閱 I 本交流的小人物 

为伍我跟你说，■切无关谁奸谁坏 4 栈们都是脚本. 

h 不过我让外東其右个 U — N 脚本的鸷道。如果没 
冇我，你水远不会知 過脚本 外发生的唭， 



哦……好大的栴失嘴……才怪!谁关心脚本外发 
生 r 什么亊? 


并实上,大家都 关心。 到忘 id 脚本编程就是为 r 
给 N 络川户提供更後的体验 > 如果脚本无法检撕 
外部的.件，我们也 m 难改苒用户的沐 


听来倒有几分道珂，我的确想知道网页栽入的时 
机，或边甲户点击/键入東物的 时机。 你的意思 
是说，如果没冇你，我就无法察证这些半怙吗？ 


噢，原来我们没那么不■样啊] 
你不用主动頃用我，我会调用 


i f m . 浏览器调帀我 + 很多状况卜—我会再调用你 T 
因为响应外界革件通常需耍数个函数。 

对啦！这样你就不会避开我了吧！ 

珐奸你办得到啦"■…- 
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以函数引用避用 HTML 


使 ffi 凾数引用联结事件 


你可以直接存 . JavaScript 代吗中指派函数31川作为事件处理器，以取代 


mi "HTML im^ 眹结网调函数件的方式。换句话说，你完全 

不盅冒若深人 HTML 代码的风险——只要使用函钕引用设定冋调凼逐盈名#.相：. 的$刺 


数，-切都来肖 JavaScript 代码内部__ 




window-onl oad 


initSeat b; 


/ 



a 寸 jmtSfflte(>iSj 教的 ？ 1 真 

4^ont[iaJ ^ 件？ A 


所以 T 单纯丁 JavaSWp 代码中设定事件处理器,包栝指派函数 U 川 
给某个对象的事件特性。以 cmload 事件处理代吗为例 * 函数引川的 
指泯，使得触发该事什即调用 initSeatsU 函数.虽然“调用”干 
本件触发后自动发生,但效果其 实是: 


onload! 


■ >" window . onloadf ) ; 




ijiltseatsOi 


■JniffAd ： 畢件 wiiufd 
puliwd 好乜耗&萬个攀 
绾 苒 …… 


…- 因 + 坤 4 沒宏衿品较⑴角 : .. 
H tS^tsQ 逢发 W 公琿搴件 .. 


使用函数引用指派丰件处理函数的好处，即#: P 创建 1 i HTML 淸楚分 
离的 JavaScripi 代码——不偌冉把 JavaScrip 代抖指派给 HTML 的杯件 
■性 • 

^ bw ]} ™[： jrrl -" iij - LSLrdLL . 1 ^7*^"' < body > 

蚬在 < body > ■以电纯地做令 ■ c . bodyyht 函数处 fiiti 经都在 
JavaScript 代码中完成联结 。 我们只耍确保車忡指派代码的 P , 动 ■¥" f 能 
茚单，所以通常放在网页的知 V 头区域 ( header ) ? 

仍是有个问題。如果我们需耍把自变设传人单件处理器,才能协 
助它完成工作时怎么办? Mandango 使用的 prUoad 没有问题，但 
□ nclick 杯 ft •需在点 击庵 位时传送拖位编1 A 数引州没有极 供透过 
frfc 法传速数据的方式，我们盛要其他选择•…- 


备数引用提供联 
结擧件处 理&数 
乌事件的便利方 
式 o 
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请为 WtStabO 函数与 onlaad 奉件处理器进行联结 < 钽这次话使用函数字面 M , 别用函数 

引用 4 
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习题解答 



联结何在？ 

透过函数字面量 + 述是有个关于亊件联结的问题没有解决 B 我们知道， 
onload 事件处理磊能子网 Utfe 头的 < script > 标签 1 fl 被指派，就像 
其他一粒脚本 ， 这个方戎的运作一直+错，因为和 onlcyad 绑在一起 
的代码要到网豇栽人后才会运行 （3 orUoad 丰件发 生后） 一就像 
指派 initSeatsO 给 HTML 的 < body > 标答的 onload 戌性这个老 
m , m 其他城数字面: i ： 事件处 m 器又该 在哪甩 得到联结呢？ 

答案回到 onload 率件处理器回闼函数.^是 t 朕结网 M 上所有卓件 
的好地力\ 


onload 事件处理 
爵是个抝飽化所 
有事件的 绝佳摊 

0 


window.onload - functionj) { 


U Wire other events hero 


// initiali,ze the seat appearances 


initSeats( Ji 


}; 


网 Si : 辦有萁砧濘踔秸砂 
帥拳作赴 ff 器中嚷睜鰱 


專禆#苋的代茲仍在 
— 專仵 41« 器中运行 .. 


总结上例， onlc ^ d 丰件处理器变成了唭件初始化瑀数，用 T 设发网 
页中其他事件 * 所以. cmlciad 車件处理器不只执行一般的网页启始 
任务， M 如座位状态初始化，乜也把所有其他事件处现器回调函数联 
结 h 应用程序。 
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函数 





谪帮 Mondango 完成新的 onl & ad 串件处理函数， 


// initialise 
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磨笔上阵解答 




笔上阵 
解答 


ahd # 件让 is 器 


话松 Mondango 芫成新的 onbod 卒付 处; I 函数= 


tuitSeatstl 


秉 ffniod 的 ff 务 


f3 Jr/ ti £i«ciict 專作 it JS 

a , 


认函數字 $ 蒉南詢用 
e^crfuS*^tStjJii(() r 必定 
f 烤排 f | 进去 ， " 


利用成盎爷考 . 

聋 At () 逢教 

■& ^dick 事枰托取系， 


ihowSea 扣 tabs 仙： 

……■■……■•…… J … ■ 

showSeatStattfsll ); 

鏽 | 1 ,^-_ 1 1羅 | 麵 |_‘-»" 1 * |: 1 | 1 >>! _ 8 " 1 ^ 1匯 | 

showSaatStMustil ： 


£uncLion(evt I 
S-.inCt ioTii&vtl 


f t wire tbe Find Seat button event 

doc^m^.getEl^entBvld^Eind^a^-J. 化坤 ㈣ / 

"Wire the seat iiri^'Se events 

docu^nt r g e L E l em&nt Byld ( - f - ，舰， f ^ ctionievt ) 

docLin , .G , n t“ Q e t» El^rn^n.LBy Ic31 - ssh l ? ■«■ 
docunvent .诉 t EleiriGCitByld I "geat_. . Pr^U®^ 


"Initialize the seat app^^i'^^ er:l&a 


window, onload = func 匕 ion()( 


复习要点- 

■ 回调函数被浏览器调用.以响 w 发生在脚本外的本 

悄， 

■ 函数引坩能像变魅般指派函数. 


_ 凾数引用 U ： 我们眹结 JavaScript 代鸪设计的半件处琿 
涵数，而不番改动 HTML 代码 E 

■ 函数宇面设为无名邁数.在不盅要有名称的函数时 
非常方便。 
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"龙寿纛岡敢 




1^ : Mandango 为什么把 onload 事件处理器创 
建为函数字面屋？ 

答■-因为完全没有创建有名称的必技的理由。这 
个&数只会创建一'次，创迷 a 的就是岣应 onload 
事怦，我们也可以创建一爷枭故并指派它的 d 用给 
wi nd q w , on load ,. 但 A 教直括使用及 致字面 f 
与穿 忤瑯在一起时 4 回调疵数与事忤的版结反而更 
为清楚。 


闲:其他回调函数也必须联结到 onload 事件处 
理器中呜？ 

^ :是的 & 或许有人正想把回调為数直接与冋 
页标头的 （scripts 标签袒较结，但请记得 H 
页内苽在栽入标头时尚木载入。所以，所有调汛 
get Element Byl <3{ ) 的行动部会失败》事件处攻器 
也不会得到联结。 on I oa.ri 处理器則保证问页一定 
己经载人, 



Miv gt¥ ： (?=-ma rn j 
<Lmij tj)-# 

口 i* 

•?Img ids^soatS® 
■^my 』 d ， 5ed±3 ff 
■*=imq ici- ■■ 8 e^[-S r 
djTig i rir ■ijHd.LS" 

■: "Iflig i 

^ ijTMji id - # a.oa c 7 " 
<imcf ic2='3^319^ 
<ilrrjj U ■ "flea 1 9 ^ 

^J-mg idlr-Eirj'LJd- 
d rrg i^l «-sea t 31 - 
dmg idT*HC 3 C. 12 JI 

^mg id ，， fceaTl4i 
p idz.sBatiy 

■cim& LcS--s#flt^6' 
id-^seatn* 
(img id: ， E q；aLlir 

<iis 旮 id^seatH 
亡 iinq L d- - Beac iJj}-* 
'■■izig i<il--i ： p^t 21 1- : 
nmg S-d--ge»,ic j?-, 
id^»ac ， iL 2 Ji - : 
<:I n, 0 ^ 
■=+Hg id--aE,-] L 2^-, 
dmg id ■: ■Feat 价 I 
dm 穿 ld^ ¥ 4sc!atZ7 r i 
(ima id=rs e 钍糾 — : 

id-’gfat 39 r b 
fimg idc^ifeat _]!£■■■ 3 
i^= ， sedUl* s 
<ifiig i d - ■■'Ee-ac 32 ■ 3 
<irag id-=*Escratll T e 5 

<i_ i<i = _s 料 si 
<ing id-^geacjs-r gj 

<img id- - tfcj.r_3fi* ci 
id- r s^dt >-7* 
«img id- # fr M r 3 a- a r 

旮 j£j! = » St p^ L jtji, 

mpur -V^^butt^ 
div> 


吆 HTML R 页为外亮 

分离 Mandango 的 lavaScripc 代码与 HTML 代码 t 揭露了 
网饵的结构部分可变得多 么鉍巧 迷你 ， HTML 代科也 
更易维炉，不用扣_心伤甫 JavaScript 代码可能破坏 f 应 
用稈序 
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功能性 JavaScnpt 

JavaScript 的一小步 …… 

这-皁虽然没办达解决世界和平的大 W 题， JavaScript 处理 
气候控 制的问题上，的确朝若汜确方 M 辺进了 -小步，把大问题钤变 
成小问鼴.+注 T -0 的独恃性并致力十代矶的再利用，都娃函数改以 
脚本的方汉。 




当然, Seth 与 Jason 在工作上运用相同的解决技巧,创迚结构釭良好， 
赶容易维沪的 Mandangt 如裝没发生什么葸外，世上的彪形大汉都 
能舒服地看电影 T …… 



吟- ifPf - P»iii-taita 1^41 _ 


rhp&ughi 


Jin 


iv4il4blc 


Aeictpt ? 


mmmm 
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JavaScript 填字游戏 

填字游戏的时间又 到了。 休息一下，利用填宇游戏活络 
你的大脑皮层。 



横向提示: 


纵向提示: 


3.栺派疵杈给变量时，你在使用 funclimi ___ 

5. 在数有助于削减_代码 n 

6. 你本人不会闲用这类函啟 D 
! U . 元名滅•数的主体， 

12. 茧 禹数相 对容易调整，即梘与具有良好的 

13, HTML 1现7丹页的啤个部分？ 


L __现在跟 Mandango 如平輞处了， 

2_杂数改善 r 程序的_,所以我们不必一直复 

制代码 D 

4. JavaScript 立现了円豇的嘛个.部分。 

7. S 从為教中返网數掂，请两关犍宇 _, 

8. — 段可以重复使用的 JavaScript 代鸪。 

1函数很追合拆辟_, 

】1.想传入旣据给必数，冬盒 - 
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JavaScript 填宇游戏解笞 



JavaScript 煩字游戏藓等 
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和乎一斑都是艰难的命翅。 U% 

利用 JavaScript 代铒 _却 K 布 
组织最佳的代钨才能导向安穩乌 
宁靜。生命总是不易乎稳疙诚， 

至少 JavaScript 的世界很容易劫结不安。 
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7 表单乌验 证 



不知迮小生运剃溫 文埔雅 > 进谦 j 
的逋长.哇公拿射这位萬人 
的电话睪铒一■可陡黨荽~ A 身幸 
tn «. 你扣绂 艰？ 


让用户全盘 dk 


有了 JavaScript ， 你不用风度翩翩或鬼鬼崇祟，一样能成功取得用户 

的倌息。 但你必须千万小心 a 人光很容 M 犯错，也就怂说，在线忐单锟供的 
数据不见得全 郞准确 或合格 。 h^Schpi 能帮上-点忙 。 把输人 的表单数据传 
给 JavaScript 代码， 可 让网络应用程序更可 靠，也能 为服务器减少一些负 
担 & 珍 贵的带宽应让给重要事物， 例如桔彩的影片或可爱宠 物的 照片， 
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横楮广告的数据域 





n© T 


^ et ocity...ban 


PaHHerocity ： 飞翔的广告 

Howard 是名热爱特枝表演的飞行员，他铅近的热忱转向空中横幅丰 
业， Bannerocity D Howard 希望为 11 榷幅广告 11 {banner ad ) 带来全新意 
义一^也要在网1:按受空中楮幅的订单=■除 f 开启新单业 ， Howard 希琪在 
线 i 丁绝系统能帮他省 F 待在地上的 时间， 尽情千天际遨翔 


Htrigaid 牌宅一浮 
二敁羿代的考式 


Horned 现耷的本 ®3 辈格 
仗必-靠作 .6 。 


Bamerocity 的在线汀纸系统必须 M 捉所冇和空中横幅相关的 
U 购信息 + 这很审耍^ Howard 认为，在线汀黾应该包含现冇 
纸项 U 单的笵-栏、另外加 I :电子邮什-栏，因为客户将在咧络 
h 填写汀单„ 


Message (禮 tt 该 

客户想 制空+ 椹幅$现的惜 


ZIP code ( 峥玫铋碣） 

呈现恰 息的地沔区域。 Howard 
会 T 1 飞过指定邮政编码地域时亮 


Fly date (飞行 0 期） 出楢幅。 


拔苕横幅芡 t: 天的 u 期。 


Ewafl (龟孑_件> 


Fhovic number 奔户的电子邮件地 

Name < a ^ ) ( 电活 咢码 } 址， 

古卢姓名 D 客户的电话号码》 
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Panwerocity 的 HTMI ■表簞 

向 HTML 寻 求了一 点协助 ， Howard ^ hBannerocity 在线 if 购 
的第一步，旮来还不错。 


0 矜 O 


Bi^ninKlty - PgWwJtMd Onilini 


O 



― " - — 〜 . __ h„_,__ 

BANNEROCITYJ 

_. " 1 r "- 1 III .. L_ 一 1 '~' 


EAlsr th« banner ftwroage : 『 
Entfi-p Z.P ca^le c 
Eriliir irm dale for llw meiisarse to 
En^ar you-r name . 「 

Eniat yoyr 的 numt»r：[ 
your ^n^ari 



全新的 Bannerocity tj 购表咻具冇二切必要表单域 T 也 
在没有 JavaScript 的怙况卜 -准条 受订单。有什么小_ 
对劲吗？ 




笔上阵 


111":— -略 ▲咖々 


用 Howard 的 HTML 表单填 写一份订卑吧„别担心，我们不会 
跟你索取空中横幅广告的费 用啦！ 


Enter the banner message:[ 

Enter ZIP code of the location: | 

Enter th. date for the message to be shown: f 
Enter your name:[ 

Enter your phone number:[ 

Enter your emaH address: 
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港笔上阵解莕 


^ 1 % 


伐 .不 h 的空 中枨蜴 P . 

豉珥下: J 2 个字符 f 以一趙太 


用 Howard 的 HTML 表单填写一份订单吧，别担心，我们不会 
眼你索取空中横幅广告的费用啦！ 


话數 E 


mp. 


Enter the banner messa9 d: |Mandango... the movie seat picker for tough guys! 

Enter Z\P code of the location: |i 00012 ^ - ^ ^ 〆 

Enter the date for the message to be shown: |March 11, 2009 ^~ 〜、、 

Enter your name: |Seth Tlnsefman 

Enter your phone number: )(212) 555-5339~~^ 

Enter your email address: jsetht@mandango 





这4 个*效栌 邺邙嘁 〆 / 
蚧—一站 ■> 这炎的 

域妒畢名- 


#斿: t ±_ 社拉#_坊*讧 # 
. 不呆用 M 咢。 




S 朗4未未庳采荦拽明 
的 wm / do / ww 格式, 


当只布 HTML 还不够的对候 

Howard 发现在线表单只能提供数据输人的管适 > 他述需耍 JavaScript t ^ 
助维持表单数掮的可靠性 E 他也需要溃楚告知帀户，什么样的数据，才 
构成 ]T —奸数 据"。举例来说， BanMrMity 的贞面上需要一些提不•，用 
户才会知道空中横幅需限定在32个卞符以内，或者 U 期应该采用 MM / 
DD/YVYY 格式等等„ 


平好 f 思， 禮椹广 
告文字 &拽52 令 
字符 《 


Enter the banner message: Mandango^.me movie seat picker for tough guysl 


咏谈 ，:相不合格的 
教对 • 


叩 m A 輩《常不金 


但布 个小 | W 题 9 如果 Howard 不知道如何让 JavaScri pt tiTn 」 表单数 
m ，JiivaScript 数据換纵代码再聪明伶俐也无用武之地…… 
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为 f 访问输人表黾的数椐， rr 先需耍分友单中的毎个威。这点可利 
用 HTM 1. 代码的 id 或. nai ^ e 揉性（成两者并爪）处理。 


Mm * 曷疗可抽 — 无 
t*dj. 表掌中的 ; aL 


^ 属付刁烛_乇二嘁 
i ? I 1 )网再天^ 


表单域具有两神识別方式的原囚，均与访向表革域的途桮有关 a 笫- 
种途砼使用 get Element ByldO ■-—可访问网页上任何元索的涵数„ 
这个心式没问题，但还有史简单^赵针对表黾设计的途径。 


zipcode" type—■ text w size=" 5 " onclick^sliowlt: (this - fona} 


form 对象 S 宮的地方，在 T _ 它也是 t 数组，负萬存储表电中 
所有域 . 但它的钕组元素件非利用数值尜引存储，而蛙使用域 
独冇、千 name 厲性设定 的标识 符。假设 form 对象作为自变 
& theFome 传给某个函数，则输人邮政编码 ( ZIPcode ) 域的值将以 
下列方式被访问： _ _ 

Tm 功象的幻4 ■名好 □ 1^**"*^ 


的（&。 


表辈诘的抽有名打，釦 
< jnpiU > 仿签的 屬待 
^% l ±. 




何时霈要验 


" V 没寿鼉问 


f 5 ) :为什么每个表单域都能访问 form 对象？ 

答■- 有时候不行、但清记得，表单域能坍于兩用 
需要访问其他表私域的硷证是 fe D 此时 T 每个表单 
域里都能访问 torm 对象成为方便访问其他表单域 
的关犍。这个时象通常被择入验证毐数，让由軚快 
速搀出需要的域，我们的 Bannerocity 邑例将继续 
重用 form 对象，从灯昀表单中访问域„ 


1^1 : value 是表单域的一个特性 （ property ) 吗？ 
这表示每个表单域其实都是一个对象吗？ 

答: 没错，正是如此，^ JavaScript 每个 

表单域均表现为一个对象. form 对象則提洪了快 
速而轻忪地访问这些对良的方式（以取得表单中的 
任何崎> □ _ 旦你用 form [ k otoj ect naime - ] 拿 
到表单域对象，洱加上 value 特性就能访问域值. 
第 9 章和第 10 章还会进一步讨论对象 4 



检查表单数据的时机，取决子选择正确的 
用户输入事件去处理。 

对 -F u 何时" 脸证数据的答案，与車件有关。另 
外，还要知逍让你察觉用户何时输入数据至域的 
丰件 g 换句话说，挑战在千响应+数据输人后 
立刻被触发的亊件仉 | Vij 题还没冇答案……究苋屋 
哪个书件？ 
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表萆域带来一理串事件 

气数据 被输人表单时，产士了一连 串事件 4 你畤以根据域基础，使用 
这些亊件作为 验旺域 钕椐的进人点。我们先仔细观秸一般输人数据时 
的顺序,并理解发生/噶些事件……与何时发生 D 


© 选择输人域 (on foe us ) ,, 
o 在域 1 输人数据^ 

离开■该域，稃向卜’个 ( onblur / onchange ) D 

0^选择 'F 个输人域 ( onfocus ) 
o 在域甩输人数据-.…（下略） 


输入数椐至表单，点 
燃-系列有趣的 

JavaScript 搴件。 


❶ onfocus! 


Efitar the banner message : | Me ^ ango rr . the movie seat picker for tough guys ! 

Q onfocus! onblur! 


Enter ZIP code of the location: |lQQ0l^_^ 
Enter tha date for the message to be snown: | 


❺ oruhflng 


eT^ 


Enter your name： | 

Enter your phone number; f 
Enter your email address:[ 


一开始选择输人的域时，触发了 onfocus 車件；当域 
不再被选择输人时._触发 Tcmbliir，onchange ^ 
件与 onblur 有点相似，但它只在某个域不再被选择 
而且输入内容被改变时被触发„ 





哪个亊件最适合用于验证表单域的 数据? 
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我的视线焦点 


不再是恁点： onblur 

M 然关十使用 onchange 事件 P 数据骀证尚有争论，其中尤 
以 K onchange 不可用于验证空域 w 特别值得注意 5 表单初次栽入时 
完全没有任何域数据,就筇用户浏览 T 每个空域，但因为表承数据 
泮未改变、 onchange 将无法被 触发 ， on blue 啦件能解决这个 R 题, 
每次输入选择 (input selection , 或称 focus, 焦点)的离开 t 都会触 
发这个如件。 


onblur 事件极玟适 
含触芨数榇验证。 



^ onchango , 只要域不再垃焦点即触发 unblur , 就苋并未触及 
数据 n 也就是说 + onbl U ir _ 常强火 t m 也表示你必须小心处理数据 
验证问题的告知芩式与时枇 □ 例如说…… aim 框，即可 能娃个 容異但 
冇风险的松证告知备案。 


十 没有■恒 m 

~有蠢舰 


^ 在用户实际输入数据的时候.不会产生某些事件 
吗？ 

答 当然会 a 有许多嗝应噠盘行为的 f 件，漳 
OTikeypress ^ cmkeyuE〕、onkey down 等等 - 虽逆有 
些状兄适合响应这些字忤，但通常不达合验证，因々 
在这些事件触犮的时冋点、用户多半还在蜍入信息。 
到用键盘相关行为于验证軚据，将昱得有表换心过头， 
像一下子提铉用户打错厂字，一下子提酕铉息輸人不 
定戋等等。最好等到用户离开域；离开域就表示啟锯 
的楠 入匕径 完毕.这项行为 别由 ontolurf 7 件负贫嘀应。 


1^1： oriblat . 这个車件名称好奇怪，它是什么意恩？ 

onblur 其实是 onfocus 的相 I 反事件如果 
on focus 在元素或表单域取得输人 A 点时触发 ， onhitif 
刚于域失去焦点时被触岌 D 蚤然 " fucus 11 在政并非 
t 指视线的來焦，拉 ' blur " 还是代表失去隹点。这 
是 JavaScript 的丈字游戍，后来变仔有点让人摘不清 
楚.总之，请记住 cmblujr 在域失去焦 A 时被触发， 
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玎使用 alert 框蛋现验证信息 


alert 框实在很适合对用户快速地呈现佶息，也 iE 好是最简申-的让用户知逍表单数 

据冇问题的通知形式。如果在处理 . onblur 事件时 t 检测到冇 M 题的表黾数据， 检务表否 



頃用 alertf ) 痛数就对啦! 


嘀苋跆诅函赶 .松肇这 


SkiH 


空乇 □ 


w *ase enter a value . 


return i ： rue; 


funct ion vali dat eMcmEmpty l„ I nputF ieldi \ 
" See if Lhe input vnlue cemtains any 


t f <i np'J i:Fie 1 d. val ue„leng l h == Cl) l. 


U The is invalid!- so noLiCy the 


alexrt enter a value. ■ > i 


retyi'falser 



依照下图的输 A 顺序.将产生多少个 onblur 寧件？多少个 onehange | 
件?先别频恼 onfocQS 的问 Ifiu 
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on ' bkir : 


你说得对，—-点 都+合 理 + 某咋用 户也觉 得不合 
理，但他们就是把矛头指向你身 tT a 


冷舴一点 t 放铎松 s 没事的 D 这不是你的错。听 
ti , 数据设被改变的问越+是你的與任 D id ft : , 
你的名卞足 onthange ^ 


我 ff I 先不要想得那么远。就像我刚讲的，事愔的 
衙任不在你分上 b 如巢脚本 验证数 据时还耍袓心 
域是否空白，尖存该用你触发验证代石 I 


振作一点啊！反应小要那么激烈。虽然你可能不 
适合触发验证代码， m 也不表示脚本对数据的改 
变与否完仝没兴趣想想#允许 m 户编铒数据并 
另外存储的在孕 .？ 你在这种悄况下.就 m 适合当 
个杷艾者，只存储苒正冇改变的数据。 


当然啦！不要再一直打右你自己了。 


别客气好 r , 我还想再多脚一点，不过我得太- 
验证数据了……回头 E ! 


onchange : 

你说户居然 nj 以送出包含亡白域的表单？根木 
不合理嘛！ 


好吧……现在的情况是冇一个刚开始为空白域的 
表萆，伹使用者跳过某些数据+输入，而送出仍 
然有空 ri 域的发葶……天啦 h 天啦】噢，我的心 
脏！我的心 脏！ 


可坻 我们 刚刚不 足:才 vfi ^ f 一个很可怕的惝况 
吗？我对空白数据的管理 lh 脚丰失望 f , 结果梢 
个丰宙囚为这个隙缝开始崩 m r …… 


呼……听起来好多厂就算它表示我再也没有用 
处了。等二下，我好像又开始紧张了…… 


嗯，对耶。所以我迚 遛有用 的啰? 


谢谢^我现在安心多了。 
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走吧]无物可 ■! 


检查……某些东西 

冋到 Bannerocity 的生意 h e Howard 知過，他的 Bannerocity 表畢至 
少需要骀证所冇域都冇数据 a 彳4从 JavaScript 的角度来宥，这件亊要 
从一个 m 命怪的观点人 f -, 说得赵堉楚一点，我们并非检査域是否具 
有某物 ( something ) ,而是确认域是否井非无物。換句话说， 4 有某 
物”等干•非 无物， 。 

布某物=非无物 

如此反直觉思考的 原因， 就在 T 检査“空白”的表单域比检迕 11 填 
的表单域更简单。所以，数据验证防御的第一 路浅， 就是拾杳域 



Howard 的验证函数必须响应租个表单域的 onblur 革件，以执行非 
无物验 iiE B 如下 所示： 

表聋喊 it 奄砵—各二的杉识符， 
© 此徘从蜱本的其油都分汸问域 ■= 


■ ci.riipn td =' pbone " nsme =- phone " type =' t & Kt H size =' 12 


表掌植 D 象璉用荚该 
$ tAi t Hf 4 ^ Aik v 


h 例代码使用了关键字 this , 以 31 用表申域本身。 it 过把表单成当成 
对象传送给验证闲数 + 提供函数 1 BN 表單域值，迅有 U ^ n | (存储所有 
忐单域的） fome 对尜的机会 + 有时候 相当好用. 


onblur= ■■ val 丄 3atieNcinErnpt:y (this) ; " /> 

在训事 4 ,以松登域老 S 林 0 
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硇认域“吞昨 无物”的验证 


如个灰单成均打联结 ontilui ： 串件与 validaLtfNOnEmptyU 祕数的 
相似松序代码，借由联结毎个域的 onblui 事件勺函数，表单的所有 
数据才可接受验证 - 


* #嘁汉用玲设基赵，以 
c * ^ &丢馬电这足这 


va 1 i dat e 钭 onEmpty < inpu tFisld^ 


就本例而言， val idateNonEmpty () :函数的返回 fit 并未使用 n jt 目 
的在于回头勺调 MIS 数的程庁代码沟迪验 iiE 结果： 如采数据没(4题 + 
返回 true . 如果有问魎, j&m false . 稍我 n 将看教这些返回 
值如何用 T 确认表单数据没有问题，而坫才送出忐单，交给服务器处 


W 雜 


你能想到任何使用 Alert 方法提醛使用者“表单资料有 




別太过千扰用户 


不使闲傾人 alert 椹的验证 

Howard 很快就发现， akrtm 并非通知用户 41 数据不合格”的邱想方式。 
他接剑很多来 S 在线填写 B ^ n^ociry iT 黾的用户的抱怨电话，大灰纷纷 
抗议一啟惮出来的 alert 3弹出的 aim 框干扰了在线体验时，我们多 

少卽会囚此位得火大，数据验旺也不例外， M 然此时的 alert 框是为 T 韨 
肋用户 ifij 出现。 



Howard 的解决方式，就地采用 11 被动輔助系统 " + 必不念使用 3krt 枢， HTMt ^ # . mm 3 1 
因此不会干扰数据输人的流程。然而 T 被动的州户 it 知方式，篮耍新增几 证样则 ㈣ 牧 



新加人的 HTML 輔助疋索呆现优于 alert 抿的大帧改#, 它们 +会 



阻档用户，但仍能泠递相冏的洁息 a 铣结构而我们只盏加人 
^丁\11的< &；? 311>标签 + R _ H : 名称与代表的表单域相同。在网页的忐单代 
F^ r h »新加入的 < span > 标签就在输人域的下 H 


f 年给 ^iiJatpNanEmptjjO # 
二个 t ) C . S . 戍夺喵 f 碎鈦 
走赛一罔 f 4 d n 


i6= K pliorie_he 1 p' class= 〜 hel [ 〕 ■>(/spdn> 

\ 

<印_>| 在 著桂#空仓伟诠 
羿珩 阳，可角金访著砝的*辈 

开个扣必场一致.样妯 fS 
.6 对糙榷鵠胗 AMses 现， 




有了 span 元紊苷诹辎助说明，只剩 K 实阮呈现辅助佶总的代码还没 
出现* 根据上例出现的 v ^ lidateNonEmptyU 函数的第二个自变贵， 
这个闲数极町能负贵确认用广收剑了 辅助信 
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更糖密的非泛物验证 

Howard 制作的智蒽 被动辅 助方案 > 出视在全新改良过的 
valiaateNonEmptyO ■里， 新 ■现在也为表单腦定和洁除 


helpTffir C 约象行的作入基 
.數的 第二个 t ft # .. 



辅助信息 


tt 


进省 alert 枏 


■ *■» ■ * ■ 


Bannerocity 的数据验 W LL ' fl 大喊改表，^ 
法,它依旧使用有益的 JavaScript 处方, 

验的流程上较为尸净。 
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一切都合适呜？ 


太多也是个闷趣 


结果 ， 非无物的阶 i 正运作确实良好，但太多数据与太少数掮都町 
能带来问题，谓 t Howard 最新收到的横榀广告 t 了甩，它突显出了 
BanncrtK；iLy IT 单■的新叫题。 
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尺寸很重要 


Baiinemci ^ 遇到的凼难， ’在干 Howard 的空屮棋幅只能容纳32个宇符 t 
ft 1了甲.上的怙总域却没有加上限制 t 与然， 用户能 梂收到“尚未堉人 
信,0，的鍫告是件好亊 + 但太於的信息仍然 <以通过盼 UE 而不受阻裆. 
这对 Howard 却是天大的问题！ 


鬼卢输入太 I ±字. 
ft eAAh*iccifj 不令視孕 
.6 节问姓 .. 




Enter the banner message ： Mandartgo... the movie seat picker for tough guys!^ 




o#t 穿较蝠骷客齣 

^# i 掌杖放坊 
斯了 •-…■稽 fit ; 


想在有限的 空阆呈 现无限的信息 T 不4能成功> 而且只会 i ± 客户不高 
兴……就像现在的 Seth 与 jason 。 对信息域加上 ilk 大长度的限制，才 
迫解决之道。诖好也针对新的骀 iiF 机制,栲别制作■段輔助说明，确 

保用户知道信息长度的限制。 32 ^ 
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麼琦上阵嶼萏 


磨笔： 



丈 t 的凾 Mt ! 交 

I Mae rOefl j (ft ^ 

七丨島 32 “ 


请设计 一段 伪代码 T 呈现■新的 Stinnergtity 长度验证函数如何运 
作，确认极小和话大长度耶获得验证 c 




Af ( fiejd . Val . uei 5 shoi^r thanmf n Length . 0 ^ fie |d Va I u e is . Eo ng er %]\anm axLeiig !;. h ). 

. 勃辦 ,1 ^|^[|?.切咕 . . .. . .. .. .. 

flse 

■* ■"■■■■■ - ■■■*■■■ -■■-■■ p t - ■■ p t p ■! b !■ a p ■» r p i r f p i r i r i r '■ b a i ■ a ■ ■ _■■■■■ ■ ■■麵 丨 ■■國 ■jii ■疆 i. j i. ^ j > a - - — « _ , r _ ^ _ >； _ . r ^ r ^ r g r 9 r 9 r a r 

CJearthe help text 

fflr ， PiPfP"«PiP 嚅 pibib I 1 ■■■■‘■■■■_■■ 1 ■■■■■!! ■■钃 uai^iiHfc a tafc 丨 a J . - _ a 


验证数 提长度 

新打造的 validateLengthU 函数 fTl + 松裔并确 iA . 友肀数据览是左 
遵守特定最太长度与枭小长度。/+: Etannerocity 的案例中，这个函数 
中.要限制横韫文丰域的 虼度， 不过它也 W 时限制较小 K 度为1个字 
符^_ Htnvard 大概不会遇到只想 ■# 到狐零零的 “ L " 在夭上見的客户吧【 
不过.电点在干确认 该域的 长度不会大于 32 令字符，也不会小于 
宇符 - 



，二 r 二= 

helpTextl ) 


除 f 以 validateLengttin 强制规定段小与嚴大 长度， 由数也需耍验 
证 M 外两个 0 变即为输入域 （ inputField ) 与呈现辅助说明的辅 
助佶总元紊 (helpText) B 所以，这个瑀牧共霜 4 个 d 变 


mxUnqih 

输入域允作的诞太长度 。 


Enter ins banner fnassage: Mand&nga . the movie seat picker for tough guys ?" 陶抑 snt^ a vsfw 1 fa cfi 繼 t 〒 f” isogth 


miwLewgth 

输入域允许的锒小文+农 度. 


jhpafFkld 

:i 耍睑旺长度的输入域 D 


KelpText 

黾现 辅助惜息的元素。 


< input id- p mes3age' name= ■message：'' type= H text H size-" 32 11 

■onb 丄 ur= "validat 芒 Lengthtl, 32 , thi?i docuunerit ,getEle3nentBy!d{ - message?_help H " /> 

^ . 

<span id: H message_help" class="help"></span> 一" ~ 〜 ^s, 

鴒总輪入域的 

validateLength{) 函数接受 input: Fie Id 自变垃的值》而后检査对疾 # 

以确 认该域 的长度至少与 minLength 相但小千 max Length ， 

如果域长度值太短成太甽以 heipText 元紊呈视辅助惜息， 
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V 复习要点- 

■ 每个表中.域均 W 作为 J avj^Serj pt 对染而被仿问。 

_ 在表爷域对 象黾 有个 form 特性，使用数组表示 F 
整份表单的域 a 

• onblur 璀件 j 愉人焦点离开某个域时发生，它是 
蝕发数据验址函数的绝佳方式。 


■ alert 枢蛙种很烦人 的验证 问烛通知方式。 

■ 被动式验证輔助比较直觉，也比较不会竖扰用户* 

■ 宇符01 length 特性可 M 示字符串包含的宇符数 

: SL 


f 上阵 


请完成 vaiidateLength () 函数代码.务必仔细注意传入函 
数的自变堡 a 


function va 1 i d a t el .e ng t ; 3 i ■{ m i n I i^ng th , max Length , inputFiel ^, helpTexr .) { 

// See if the input vdue contains at \ea^t mrnLength but no more than maxLenath characters 


// The dats ib i n^altd, dia set the help mespaqe 


//The data is 0K P so dear the help me^aqe 

a ■ (I ■ I ■■>!■■ Bin !■■■■!! Pli ■霤 P 1 r ■! P ^ r ■» P ^ ^ ^ I - - --- - - - . V 1 .. m 


} 
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磨笔上阵解答 



function, va 1 5 dateiiength (m LnLength, maxLength, inputFiclc, hclpT^5<t) { 

// See if the input value contain sat lea^t mirLenath but no more than maxLenqth characters 
if (inputFiel4 ： ^!ue !ength < mEfiLength |] inj?utFlefd vajueJength > tnaxLen^th) {_ 

^ ..!i. Isinvfaii^.sosetthehejprnessage 

長度 if (helpText != ntilE) 

■ -1.--- - - - - s- ! p-- - -■ - - - srf- » - a. ----- - -s.. - - - - - - - - - ■■-■* - - ~ - - - - - -- -- a. - i.-«->--->-r-Pi>--!--!--fi!<---'-p-ii!iPiBi a pBrirBaapas-iiraraiiaiii B i 

helpTextJnnerHTMt = Tlea&eentera ralue K + minUnath + a %o ct + maxLenctth 4- 

. .. ^ . . u . . 

characters in ientith,'; 

. . . .. . ... . . . 

设定辞助作 …... . . . . . . . ……………， ……………… 

左 . 以 A 嘁域 } 

. . .. .. .. . . . . . ... 

else! 

■ ^ d > _ ■■ V a j l j kdtj h ■矗 j ■> j ■ >■ h ■ ■ J ■ J ■ ■ ■■•■■■ ■ ■■ 睡 ■ ■■薩 丨 ars r a r i r i r i r -t f n ^ r i f i b t ， ■ - ■ - ■■ « - - - - - ■_■■? ■ _ _ i ■ _ ■ ■■ — ■> _ ----- 

//The data is OK, so dear the help message 

j g| |a j ■ tl B I ■ .1 If '■ H I B 'I ■ P j- ff ■■ ■ ■ m m ■^(■睡 ■■ ■ _ m ■: _ m m m J M b M ■■ M ii ■■ at 5 m m ■ I li ■! ■ I ■ I H I la _■_ ■ 1 ■ I 3 ■ V ■ I ■ ■■■ iJ 1^1 ^ l n SI ■ *1 I 

if (hdpText 1= null) 

■■ ■ "I 霤 '，* *t b I s 5 ^ 'i ■ 'p ■ ■* ■ ■' ™ f» — ■• — i ■— ■ 乂 . _ ft- J ■■ ■ & —faadkd b -i k j fcjk<i ■ li -i ■ ^ ■ ■ ■ I ■ ■ ■ ■■ ■ ■ ■ w ■ ■ ■ ■;■■ 9 p a r li b ■ I * ■ mi ^ i ® Ti ■ '■ ■ 'i ■ I ■ E i ■ I ■ •■■’■ ■ ■■■ psi 9 PB'rfi r f r 1 r ^ p i p ^ r f r 

^^^(i^ipTextJrn^rHTML ='''; 

如纽 “ x . . . . .. ... ... . . . . . 

㈣ ，_釋 . .. . . ... .. ... . .. . . . 


信息问翅薛决3 


闸决 r 描幅长度的问题 t HToward 总見■松 r 口气 P 既然 
买不到 吏拉的 布条，他也没有更好的解决方式，所以 

在 JavaScript 层次处理被幅长度向题，变成了很好的方式。 I 

茔少用户下单前就知迢 Barmemcity 的横幅长度有限7\ J 

盼 teMtm &a 哪 _asagft: [Get your adventure on with Stick Figure _en 叫 ref Weflsa ent^r a vsIub 1 to 32 c 咖 cfsrs /jt 


308 第 7 章 


Download at http://www.pin5i.com/ 































问：利用 alert 框的验证到底 
错在哪里？大多数人不是都乾分 
辨 alert 框与弹出式广告 ( P ^ P ^ 
up ad ) 吗? 

答 T 及许大多数人都知道 

JavaScript 的 alert 框不是洋出式广 
告，担无损于 alert 柜枝认为是高度 
干扰的 亨实。 任何需要用户停丁手 
边工作并桉下其他窗口上某物的设 
计，都是分钆性的。虽煤 Wert 框在 
JavaScript 狂序设计中占有 — 席之地 ' 
但敕据验证不是它出场的 地方， 

fS ). 关于在 o n b I u r 的部分使 
用 this 代表表单域，我还是觉得一 
头雾水 d 表单域就是个对象吗？或 
者表单本身才是对象？ 

簽： 两个答裝都对 ■* 在 HTML 元 
素的上下文中，关犍字 this 指向代 
夂该危素的对象。著在衣单域对象 
的上下文中 T 有个£ o r nr , 特性可把 
墊份表单当成对象访问 a 所以，当 
你者到 this .form it 現在表单域 
的 onblur 代码中时，其实它用于引 
明表单（对 象）本身. 

Biinnerocitv^t^i s • for 价的用 
途，在于取佴（与某个表单相关 
的）輔助信息■^索《还记得 
form 是对 form 对象的以用吗？它 
也是今包舍所有表单域的关拔式故 
组 (as&ficisitive arra>) > 所以 ，假 
设 J 或名称《^ 二 f i e 1 d 时 ， 你可以把 
钗组加人访问城的代鹆中 ， ^ th ^ s - 
turml -niy.field'' 1 ， 即可快速访 
3 可。你也可使利 get;Eleir,entByTd(K 
但利用表单的方式比较仗捷 3 


_ _ 

有 難问热 

碎 h 当辅助信息与输入域相关时， 
它们拥有的 name 与 id . 厩性分别是 

什么呢？ 

^ . 補助信息 t 索的 id 展性，需 
根据楨关输八域的 i d / name 而定 T 
IE 又不完全一样 * 史帏确地说，械 
助佶息的1 卩 会使用输入域的 ID , 
只是在后面加上一 help 6 这神命名 
惯剖 t 是为了在输入域与呈现该域 
的辅助信息的元索闹，建立清楚且 
一致的连接，事 实上， 你可以随龙命 
名辅助元老的 ID , 只要名称拽—无 
而且 能传入硷证必饫就好 T 。 



闷：在验证函致中，为什么于数据 
验证无误后，清除说明文字是必要 
行为昵？ 

爸 清 it 得辅助信息的支点，是在 
有问題时协助用户 n 如果愉入表羊 
的数据通过检查.也就是没有问题1 
因此不需要里观辅助怙息，故然械 
助信息 T 能乙饺囚为莳一次的给证 
而±现，最好务次通过域的给证时， 

闷 ：如果 “辅助信裔^并未作为包 
变里传给验证函数_会发生什么事 

吗？ 


表单与验证 


答： 脚本一而再 ， 再而三地放索失 
落的 t 素，抖冤过热 超栽， 浏兄器 
爆炸，剩下一团灰辨■■…■'开 it t 的 
啦1根据设计，如果柚助信息句变 
量并未用于验证函数 - Banntrocity 
的被动式辅助系统祆会静妗追场， 
所以输八城的铺助信息只是不会出 
现而匕 * 这个方式的好处，就是能 
随我 们的恚愿尽贵 士現或尽黄不由 
現^即使就各个城的角度而言 T 你 
也不需強制为表单中的每个域加上 
辅助信4。 

检查 himlTexl ： 9变量是否 non-nun 
的脸证代鸪，即允许了補助信息元 
素的 5 T 选择性 6 如良補助信息元寺 
不为 null . 表示无素存在1能呈現輔 
助信息；否 S 彳表示没有元青，计么 
事郝不做„ 

问： HTML 的表单域不是有个 
size 属性，难道它没有限制域长度 

吗？ 

HTML 的 s i s e 属牲只 嗔制表 

羊域在丹页上的实际大 」 i --与褕 

人的数据量的叹制浼有关系。本例 
来 ii + Bantierocity 的邮政编码域的 
size 展性 设为5,表示違个域在网筑 
上的尺寸大小刚好装饵下 5 个字许 * 
使用 HTML length 的确可 

以恨削文字的实际长度，但它没有 
相对的及枝 * 赵证兩数 
对于控制給入城的字符长度提供了 
最大灵活性，莬然邮政编码应该不 
只确數据为5个 字符， 遂成靖1 
数据是5个数字^ ■也许 Howard 应 
该考虑为 Bannerocity 再和上一生功 
能.■…■- 
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你在 _ 里？ 


对的橫犓，错的地方 


虽然 Howard 尽 黾做到 最奸的验证，但他的在线表单还是继续卅籴问 
题。这-次垃邮政编码输入有误的 M 题，结果 Howard 在错误的地方 
盘旋了好几个小时,或许还有比 Howard 浪费时闾更桥的状况，他的 
客户 Duncan 错失了不少销售甜甜阐的机会。 


Entef2IPwd6 oftha location; 


a t 給入 ？ < 写 
^ 石不慧崴 
字 9 住 & 破识寿 



在这阻的状况中，人为错误加到数据错误上， 
造成--团浞乱。踔客想按 t 不小心按成 f 面 
的 h Howard 的肉眼則把 I 误判为〖，结果就 
E 到奇怪的地方做横幅 r 告 r . 


S 必卩 HSHfeie ^ t 沾*戋羲 
狗的人， 3 f 争旮卑輋 

考译 □ 





你会如何睑证邮政编码？ 
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验证邮 政编码 

Howurd 遇到的问器 [, 与邮政编码的输人不确有关。美 W 邮政 
染柯的品简形式由5个数字构成。所以，验证邮政编砰以只是 
确 认用户 输人了 5个数字……不多也不少。 


# M M M M 

TT TT TT fe ^ p 



37205 






笔上阵 


请完成下列验证邮政编码的 vaHdateZIPCoden 函 ft 确保 
输入的邮政编码都是5个宇符长，而且都是数字。 


function validatezlPCode 彳 inputField, helpText)( 

/ / First see if the input value length is anything other r.han 5 

if { ) { 


/ / The data is invalid,, so set the help message 
i £ {helpText J= nul 1 f 

he I pTexi.. 5 nnerHTMi，= " Pi ease enter exactly five digits ."； 


// Then see if the input value is a number 
else if ( ) { 


// The data is invalid, so- set the help message 

if {helpText ]= nul 1 J 

helpText.innerHTML = "Please enter a number, H t 


) 

else { 

// The data is OK, so clear the help message 
if (helpText l - nullJ 

helpText T innerHTML ="" ； 


) 
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磨笔上阵解答 



11% 


请完成下列验证邮政编码的 validateZIPCode () 函数，确保 
输入的邮政编码鄗是5个字符长，而且嵇是数宇„ 


孟不#子 S (个考杂）。 


(inputFieldvalya.Ien^th != 5 )( 

// The data is invalid, so &et the help message 
if (helpT^xt I - null) 

helpText ^innerHTML = "Please enter exactly five digits 

re tur«faf 5e ^—— 不 ^ 

，…“……………，… 这田 i4ts^a 



假设邮政编码均为数字并非绝对安全 & 

如蕞网络表单聆够接受美外地址的邮政编码，纯数字的硷讧就不是什么好主意了 t 
脚为很多国家的邮政编码或许包含字母数字的混合„另外，完整的美国邮政编码应该 
包含9位数，格式为料###-##料，此时、连字符 （-) 将便邮政蹁码数据不为教字 3 
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芎达会始 u 摧务苒 i ■栌 
含 


" inPUt We =%ut ⑽， valu.=-order 卽卿 r . ™iick^pl ace o r der(this . 


form) 
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展开你的订单.吞仔细 



务个表#域尨珅助 琯忌才 
伐 I 谜用粒 m 彖-子法 a 

CSt iotm 


焱蛊=8■个很长 
的 ii / e £ f * -:|i 句， 其中 
^-妗茬个裹辈该珣用舱 


validateNonEmpty { forra [ " phone " ], £ orm [ ,, phor J e _ help B, 1 > it 


如羼表零域枪 in ： 匍; i 过，則诸 

用方 j 以适; ±J 表辈给霣 
备器 a 


Qiit 九 f ， }Mf 写访用 


J. 9 


? 角 •间热 

有蠢问他 


问： placeOrderf ) 函数如何控制表单是否送往服务器？ 

^ : 首先，函紋中的语句被架构为验证表 
竽中的每个域 . 也就是说，如果任何表单数据不合 
H 則执行 el s e 子句 ( clause ) „ else 子句只贲责 
调用 a . lert () 禹数，所以為数如裝走到 else 子句，不 
会再发生其他事情„另外一方南，如果数据铨证沒网 
題， B 1 ] 调用 form 对良的 submit () 方法，用于送出表 
单给 m 务器.所以送出表单的动作由是吞调用良单 
的 s u bm it () 方去所拉則，这个方法.是.〗3"；|3(；1^1版 
的 " submit " 按钮 p 


我还以为 aierl 框对验证有害，它为什么又出现了？ 

答； 很多时候是这样没错，仨这里真 疋的问 
题，则是何时可以千』尤页 ® 浼程， X 现译出式馆息 
(alcri) f 要求用户阳读信息并桉下 w OK" a 四为只 
在 ffl 户想要送出订 单时矛 会按下 w Order Banned 按 
钮，值得确认用户知道玟据有问趣，而本洲的问題， 
重釗值得用户 a].ertfe„ 則忘记了，被动式辅助佶息仍会 
i 現在丹苽上， 31 导用户碲正问題。 
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数梅验证 . 时机就 是—切 
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B 期问 H 

验 ii ® 期 

很明显* Howard 无法 只依耑 蜊户是否输入 e 期数据的检査，他还需要 
实詠确认输人的 y 期是否合格 t 验证 R 期的关键，取决于指定 P 期格式， 
然后强制实行 B 有种常见的 E 3 期格式 s 先以两位数表示 ti , 再以两位数 
表示月，蛩后以四位数表示年，其间以斜线区隔。 


IV1M/DD/YYYY 



年由 c ? 个字埒处 ] 功…… 
我：! n 6 * 违域 V 3 K 的问 
H7/ 


方耷 P 各由4个 f 


0 朗的 s 个郝分想飧 




分解 f ] 期格式是最简申-的部分……设 t | •出 验证 tl 期是否符合格忒的代码， 
方总困难的升始。有些很强大的字符申凼数能够根据特定字符分解字符 
申，例如根据斜线 （/) 分解 a 但娃，分解字符丰.再确认各个郎分均为 
数字 fl 为指定於度，这项努力实在太复杂了。就像怙况最极端的邮政编 
码验证祧战 t 

我们逐步分析曰期验证函数的运作方式 i 


o 


osyio/2ooa ff 


o 

分解表单域偯成为 i ■午多組 -f 字符中 ( substring ) 
怍为分解宇符 率的某 ML 

,以斜线 

o 

分析 

字* 


f 宇符串 + 

确认刚好只有两个字符， 

而 a 是数 

❽ 

分祈 

字* 


了-宇符串， 

确认刚好只冇两个字符， 

而且是数 

0 

分析 

字. 

“年， 

子字符串， 

确认刚好只有四个字符， 

而且是数 

❺ 

忽略其他眼随 在第二 个斜线后的饺 据， 



虽然 h : 述步骤还不致子成为编 程噩梦 ，■{旦对千验证一段简单的格 i ： 而 
言，好像 太复杂 了点- 


05 


" 2003 ' 


lo rt 




® 个；褐，£的霣 

孝……汶闷迪* 


'lo" 

磾个 f 符 ， fs 


2008 


不4教宇“ 
冇向 |£ f 


广 C 
❺ 


o 


四个$辟, E 妗 ■& 
掌■… ■，决闵岛^ 
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你没听过正则表达式 吗_: 


正則表达式一点都不“正规” 


JavaScript 刚好打种作常强人的内？ M : 具-正即】表达式 (regular expression ) , 

专门设 I 十用于匹配 ( match ) 文本模式 (pattern) , 正則表达式可用于创建換浅 ， 



猙是相戰，…■，…- / 


而后应用于文本字符中 t 拽索匹屺的部分……就像指认出嫌犯一样！ 1〈过我们的 
字符合作 m \ 


匹配到了 1 


正則表达式用子叵 


糢式 s 高个孑、浚戴喊铳、短发 


核式恕抻-个人的外 


配文本模式。 


上例的模式叙述了某个人的外峩属性，然后匹紀出实际人物。止则表 
达式也 有相同功用，它能匹配字符串的模式 6 
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正則表达式定义闲子 E 紀的模式 


就像鹜方指认嫌犯时矸能用到 身离， 发璀或其他外表特征， 
文本模次也有特定的字符關序，例如一行5个数字。等- 
下，听起来好耳熟……邮政 编码… …吗？ 


模式= ##*## ^ 

/ 忮式寒 含一个 
/ 只有 5 个截字 
I 的4封 = 


电 含一个 




匹酡到了丨 



"A3492 


5280 


37205 



007 JB 


"741265 






m 可惜，把 _ s 位数的邮政编码转换力 c 則表 
达甙不太符合直觉。困为 it 则表达式在描述 
文车 m 式时，会仰赖一种非常简洁 w 乂有点 
难解的语法。 你盈右 侧的正则及达式范例, 
m 难立刻看出来它用于验证邮政编5^吧] 



章畀碌必须以盎义的媾式 


喵一 的盎字必效重 

r m 


模式 






/ A \d{5}$/ 






个袅章 


V 


穿符宰 必沔以迕夂的 



如果正则表达式让你看得头昏脑胀，； 
别惊慌^ ； 

接下来我 fil 述会 it 论史多验诚实例，你会 j 
悛慢了解正則表达式 d : 
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分解 1£则 表达式 


3 譯)―爿鉍技®起疋 
财 表达式. ■ 


讲到正则表达式本身，有一组称为元宇符 （ Enetacharacter ) 的特殊符 
号， H 】 于连核卞母与数卞 + 创违髙度描述性的文本模式 s 好消 息是: 
创建实用的正则表达式时，不需要 r 解正则表达式 K 语言”的毎个细 
微差异。以 T 是一些常用正则衷达式元字符： 

只 基个*芩 

拳 

四配任何字符，换行符 
( newline ) 除外。 


\S 

匹配空格。 


\d 

匹屺任何数孛丰符 




元穿 符伶以丘斜拽 
起姑… …务® fe _1 ff 1 ) 
表 a 式栌蚪饵衫 當不一 


\w 

匹 fit ! 任 fn 『字母数字（字母 
或数字）字符 5 


A 


字符串盖以模 式起姶 D 


$ 

字符串需以楨式 
结束。 


四踅枨式的 f 符惠 
韵 T 找 * n 玷亡耷 


最后一个 f 苻- 


里然上述元卞符的描述都很准确，但元宇符放在模式上 T 文中> 其 
实更容易理解…… 
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削建正_表达式，有点像创建字符中宇面 S (string ntcral ) ,只不过 
正甽表达式出现在 一对斜 线⑺）里，而不是出观在一对 U 号里 




a 



正則表达式总是认 
斜线起始和结東。 





麯，> 
' *J t 

®e(ll 

c -r 
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习题解答 





i 斉设计匹紀完整芙国邮政编码的正则表达式，格式需为 #####-####, 而且 
只能单独出现。 

以另一个斜乘芑 
字符事必镝以莽宠 則表 m 




itfi ) 表达式。 


?誦嗎上广 


呔爿!£诠耔 一5 5个 


连字符沒笮輛跦泰 
長 S 分#砬瑱砝* 


令符蜗 W 雎定相式鸪衆 * 


西紀达飧只 一 H 4个 

K 


激？。 


深入 i £ 则表 达式： 照定符 

+是元字符的任何文字将于正则忐达式里 -昭样 PC . fc ” a 也就娃说， 
/ howard / 可找出任何包含 toward " 的卞符率，另外 t 述有另-种正则表 
达式结构，称为限定符 ( quantiHer ) ,可进一步把梭式调整得更好。限定符 
前为+模式 ( sub - pattern ) , 限定符即应用在子梭式 ， 并控制 f •榱式 出现在嫫 
式里的次数。 

* < r ^ 号稞式冶芍迭的 

f ' 巧出现飪泰汶 fi a 

限定符前的子模式必须出 

现0或多次 a 


in} 讲 

矜妒+楛式芍以出现 
限定符前的子揆式必 ^ ±Sk _ 

须出现恰好 n 次。 


, _ . 导核式必铱亡观 ， 巧出现 

+ ^ """ 仔$;欠盘， 

限定符前的子模式必须出 
现1或多次。 








虽然兒咢在技术上萆龙 s 盍符. 作常用 
子伸裘子择式，弒薄 #ts 分&考表 d 
式一样 。 


() 




限定符前的 if - 模式必须出 
现0或1次。 


集合字符或 ) 和元字符.成 
为子模式。 
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模式照定 

限定符使得正则表达式设计比起只有元字符时虹为栢响。不再抚核 t 
模式. 限定符能指定子榜忒 出现的 桔确次数„ 洁符 使出张定符店 
的邮政編码范例： 


/ A \ d {5}-\ d {4}$/ 


± S 6 教 f :i . 




限定符控制孑糢 
式出观子正则表 
达式里的次数。 


利 JH 元字符与限定符,可以创建相当强大.几乎可匹紀任河字符串内 
容的正則表达 


f \VT*/ 

Sftfi 巧穹奋鞋字 穹符. 


分何竽 3 伤 t ±现 一 : 史 
以 上 + - 深 f E K 縣交 



/{ Hot )? ? Donuts / 

/ .. 

( p E 紀由 Ocin*ts 

^ "Hnt 0oBi4iIS 




诘把姑个 c 則表达人圮卞符或限定符 ， b 它在 模次屮的功用迚起来。 


' 字符串必须以指定模式结束， 

\w 子模忒为可选的， R 可出现任意次数. 

$ 匹配 fl ; 何字母数字卞符*^ 

\d 匹屺灯何宇符< newline 除外）， 

+ 匹 flS 任何数卞， 

* 子模式必须出现.辻可出现任意次数, 
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尽 通发间 


油猜是潜 


诘把陆个1|:则表达式元字符波限定符 ， q 它在榜式屮的功用迕起乘 n 

丰符电必须以指定模式结朿。 
r ■楨式为可选的， h ， 可出视任盘次数, 



pf.v 任何字母数字丰 m 

匹配 ft 何宇符 ( newline 除外> D 
Kse 任何数字。 

了-榄灾必须出现，出现任宜次数 a 


犮冇 a 问览 

Ae 有畫醒 


问: 正则表达式是个字符串吗？ 

I :不是 u 你可以把正則表达式当 
成对字 苻弟的 描述，至少当成对部 
分字衧串的描述， 正则 表迖式与字 
符争紧玄相关，且圯于匹纪出现在 
芋荇事中的文本椟式，扠正則表达 
式束身不是字符串， 

问- 正则表达 式可以 应用在其他类 
型的数据上吗？ 

^ :不行、 正则良达式单炖设计 
用于匹配文本宇符串内的字符模式， 
所以只能应用在字符串上。但这项 
限制并未威攸正则表达式处理“只 
用字符辛欠困难 71 的复杂丈 本咴配 
任务时的极度好用程度， 


R 如果想匹配元字符，例如$, 
会发生什么事？ 

与 Jav ： iS [： rif )【 字符 举相 似，正 
则表达式中具有特殊意义的字符能 
以反斜线转文，所以想在正钊表达 
式 i 色紀 S 时， 诈必堝把斥本的 S 特 
别改写成这项规.则這用其他在正 
则夂达式里美有特殊意义的字符，例 
如 A . \ + 等等。 任何没有特砵意 
又的字符則可直接放人正 a _ j 表达式, 
不需特殊格式， 

f 句： 正则表 达式与数据验证有什 
么关系吗？我们本来不是在验证 
Bannerocity 的 E 期域码？ 


^ : 耐心一点.年较的绔地大士。 
很快.说会用到 正則表 达式了，是 
的，这趟小小的正則表达式式岔題 
之旅， 乃是为了手找验证1杂格忒 
数据的方式,的如 P 埘或电子邮阡 
地址 D FUnner [) dty 的狀4■&格式前 o 
边需要 很多协助，所以有很多应用 
正則表达式的 机会。 请各位耐心地 
再等候一下 

问：正则表 达式如何用子 
JavaScript 里？ 

^ :我们马上就要谈到了…… x . 
骑你丨 正邮表达式以对象表现于 
JavaScr 〖 pf 中，该对象支 持故 个方 
法，以利使用正则表达式匹£字符 
串内的糢式 
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本周主题： 

神秘难解但魔力强大的正则 
表达式。 


Head First, ^ …… 就是轰动万教、惊动武钵、金光闪 
m, 瑞气 千条，掮说可以在字符串内做捜索，也能辨 
识模式的神秘客吗？ 

正则表 达式： 没错，我箅逛某种代码中介客，能够仔 
细搜索文本字符申，汁-立 刻找 出模甙。屮情局实在盅 
要我这种人才……不过他们没有回 a 的电话 t 

Head Fim ： 唉……你对 M 课这一行有兴趣哦？ 

正则表 达式： 不娃啦 [ 我只是與欢找出文氺间的模 
式.事实上，我就是模式 k 任何模式都是我。只需给 
我一些参数 T 说明你在寻找的模式 t 我就能找出来， 
至少能让你知道亨符申中是否包含你耍的楱式， 

ilcad First ： 听起来很不错 + 不过 t String 对象的 
indexOfn 方法不是巳经能处理字符串搜索了吗？ 

正则表 达式； 拜托.你刚才真的提到那个东 ST 
了吗……那个业余的根本不知道何为模式,听好, 
如果你需要#常简萆.简单到不行，只是在字符串 
中寻找 "滥宁充数"一调的搜索功能.你可以用 
inaexOfO , 否則,你很快躭会发现 indexOfU 完全 
无法严格地分析字符 

Head First ； 字符串搜索不也是模式匹配的一种形式 

吗？ 

正则表达式：是啊……打开冰筘 n 也地一种运动 T 因 
为有人还没看过奥运的 竞技- 我的重点是，简易字 
符串捜索其灾是极度間化到崴简化的模式匹 sd ——此 
时的換式只是个铮态词汇或短语。你想想看 M 期或网 
站 URL 的结构，这些才是离正的模式，因为虽然仑们 
遵守严格格式，但搜索的洋细规范却非蚱态。 

Head First ； 我开姶悝你的耷思了， — 模式” 是一组对 


文本的叙述，这段文本可能出现在宇符串中_但"桟 
式 # 不见得必为文本本身。 

正则表达式：就是这样啦！就像我清你肴到 v 头发 
短短的 . 旮材商商的1没载若眼菝的人”时通知我- 
样。 这是一段对外表的叙述， 仳并 非與的是个人 n 如 
果有个叫 Alan 的人符合叙述， rfdR 正好走进乘 f 就叮 
以说他叩配模汶。 m 可能也有 很多人 符合这段叙述^ 
如果没有模次，我们就无法根掮模式找人_而必须寻 
找确定的人物。所以 t 使用 indexOfU 搜索特定文 
本1使用我匹 K 模式间的差异，就如 ㈣ 良接#找八1抓 
与寻找一咨身材髙挑1短发 I 没截眼镜的人之间的一 
样， 

Head First： 这样听来就淸楚多了 D 但是，模式匹配如 
何应用在数据验证上呢？ 

正则表达式：这个嘛，验证数据主要在 T 确认数据符 
合 “某种预光构想的格式 T t 也称为横又.所以我的 
I ：作就是令到一组模式，并 检査亨 符串是否相符 。 如 
果符仓.则数据被视为合格的 ( valid ) 5 否則即为有 
问题的数据。 

Head First : 匹配不同数据时，也会用到不间的正则裊 

达次吗？ 

正则表达式：当然啊 ， 在使用我们正则表达式验证数 
据时 . 找出成功 塑造数 据格式的正則及达式，其实才 
是域费功夫的丁_怍， 

Head First： 真是太冇趣广。作常惑谢你今天为我耵说 
明你在数据验证中扮演的角色 g 

正则表 达式： 小事一桩，我常常筘要自我解释……这 
大概是我的行为模式吧 [ 
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IE 则表达式加入验证 


利用正則表达式验证数鸪 

煸然，单纯为了找出模式而创 i £ it 则表达汊好像#常有趣，但我们对 1. 
則表达式另有迫切的盛耍，我们需耍它协助验证 Bamitmcily 的 H 期域, 
并把 Howard 带回犬空。 JavaScript 电的 正则表达式由 RegExp 对象丧 
示,其中包含使用正則表达式验证数据的关键—— test (} 方法 T 它检 
丧字符中电是杏存在指定的楨式。 


RegExp 对象的 
testti 方法用子检查 
字 符串是 否包宫正 
則表达式模式。 


桔數邻政钵砝的 醴 Re S E 叫时承 n 

正 flH 象 3 式 6 ^ 

var regfex = / A \ dt 5) %!; 





if (Iregex.teat{input Field.value)i 
/ The ZIP /code is invalid 1 



如皋 test 0 ^ 

fatse - 表子後 itE 杞先 

敗. 數馮 不含格 a 


夺 ； £ 則表 3 式的象亡 
il 用 tfstQ 方 ，:4 



如華字？ 5 $匹 K 准式 . t ⑽ (） 栌 
占初 <£ 蛉加 C , ® hAts € r _ 


M 然也能 fr: 甸个 + 的验 ijli 兩数内调用 tesu) M 法 ， 但右个 机会玎 
创連通用的正则表达式验证函敢,可供更穿门化的函数调用以执行通 
川性的验沾1作-卜•列歩骤将山通用的 valic^r.cRctgExO 涵数负犮： 


O 根倨当作卩〗蜇忒传人的正则&达式，对 N 样传人的丰 符吊 

执行 检査， 

© 如果没有找刺梭成 ， 把_助怡总指定给（作为 F 1 变敁）传 

人的 help ' TexliT 然后返回 false . 




© 如果吓 配校 式，沾除说明并返回 true . 




力-啦俱备，只欠函数代码》事实上，这个函数代码已冇大部分出 
现在其 他设旺 函数! H , 所以 va】idateRegSxU K 实同时辛涉到 
代码洱利 ilh 以及创达仝功能的止則衣达汊验 UE 工具》 
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如采栓碚夹鲛 h 表子教辟 
m 辦 w 龙 f 瑰雄舯 


» ij m _ ■» w j 7 i^j- 


麵妨作皂 ± t 、 m 站 


^ t . 灼 Wtif 形 
d -V 


根掸 It 的象达 式检殓# 
入的嘍符事， 



笔上阵 


请撰写 validateDate (丨的函数代码， E 中调用 
val idat eWonEmpty ( ^ vaI idat eRegEx () 以验证 
ficnnerodty 表单的日 期域，提示： 这个函数接受两个自变 
貿，曰期域值以及相关的辅助信息元素 c 
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.1 薄笔上阵解答 



® Wr 请撰写 validateDateU 的丢数代石马十其中调兩 va ; Idate - 

Non Empty (}4 validateRegEx () 以验证 Bannerodty 表单的 
曰期域 t 提示：这个函数接受两个自变量 * 曰期域值以及相关的 
辅助信息元素。 

function validateDatefinputFiefd, HelpTejti){ 

■'■ pi_ F _ r ~ r ■ f_ri p ^ ■ f ■ i 9 i ^ r ^ rlbpi |： i b i ■ p ■ p i ■ i ■■麗 ■ m m a I—■ u li _._■ i ■■■ i a l j h •■ ■ i ■> i. a k s ljli l j, a .a _,s._ i._ ^ _ j _-_i ■ 

//First eee if the 


input value contains data 
ff (Iva lid^teNonEm ptyfi nputReld , he IpText )) 
return false ; 


，逢 £] 朗 正 

A 癱。 


IHhen see if the input v 这 [ue is a date / 

… J …… ■ ■… ■ ■■… …………诊 . - ■一… - …… 

return va I id ateReg Ex{/ A \ d { 2 } VAd { 2 }\ Ad { 4 }$ / 5 inpytFi £ ld r valu£ r helplext , 

ri _irf n >r a ■ g r g •, v > _ ■ .g di i. - %■ - _ v i. .1 a ■ ^ a v ■ j » j i. j ■ i ■ ■ jk jiiiiiBiiBraiBi.aviiiiaiariilLri ■.■■■■! 

— - 二 _^~~~_ 

“He 卵 e enter a date (for example, 01/1 4/1975)?7!\ 

r ^ ^ . i. n j i. . i. ^ ^ j j A b ..... 4 L ^ a . J7 b . ^. a . J .. r ..... r . J, <. f-,r , r，V 




0 躬 i 31 )* 迮式瑾用元穹符岛芾定符锫掎 關/ 
0 V / YYYY 的择式： 


玢 3 釗线存 IE 則表有祥殊盎 
义.鳶 2 用反 判绞样兑 3 


Y 2100 还早- 

既然我们距离下个世纪述很远*或 IV 用户只输人2位数的年份也没什 
么问题„现实而占，观在写奸的任向】 aviiSc T i P t 代码不太可能#活90 
年.造成世纪交替时的呈现问题。 Howard 短哲地考虑 f 前瞧未来的 
严格验证版 Bannerouty (维持输人4位数年 fi >) ,然后决定汶到下个 
世纪再来承执怊果。 
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:为什么 va ' lidateD . 白 tc () 需要调用 
va ] idstqWonEir . p^y {) 固数_?正则衷达式不是也考虑 

到了空数据吗？ 


N 如果我真的想考虑脚本的未来呢？会是个间题吗？ 

答: 不会 T 完仝不会，企闺先考虑未来的需未，并 
设计能够适应这甚需求的私序代碼，很少成为问题, 
以 BannercxrUy 为例 * I 求填入4位 It 年份的 E ] 期域，绝 
对比2泣軚的版未更牦高枕无忧 a 也请记得，如果你真 
的想耍 A 手段，也可以让用户只输人2位数，仿在背后 
加上代表世纪的前2位*^所以 t 表单 X 现效果是2 R 
数的年份，但实际存谜的日期却是4位 ft 的年份， 


^ :是的,， it ■則表达式确实天生就会验证是 否为空 敫 
移嗆非空验证的部分，£3期验证一样能正常运行__ 
不过，先栓查日期是否犄入.坤页对唞户 会昱得 比皎 
I 现，因为 页* 上提供 r 各个验证问題的補助说明& 
如果没有綸入旣掘， 它显 示的铉息将本会是綸八本合 
格数据时的信息 fl 感觉 上. 我 ri 的被劝式辅助 系认似 
乎能引年用户完成瑜入表单的过枝，这秤微妙的可用 
性强化 * 或许值佴稍微 f 用一点代码,， 


g 紀最少次数鸟最多次数 


限定符 U 可楂受数字，决定子模式出现在卞符串里的次数。这 
个限定符辻有 k 一个钣本可接受两个 数卞， 分別 桁定子 模人出现 
在 字符中里的嵌少次数 c 哉多次数 （mad D 这个版本为 
f ■模式的出现提供良好微调的便利方式 B 


垔新设计'^11^^1:芒1^|:以）函数使用的正则表达式，让它接 
受2位数和4位数的年份 a 








磨笔上阵 _ 笞 


磨笔上解阵答 



h 入 Jt 的 j } 項土 

刁议€€)期 f 元旖 出琛栌祥 


垔新设计 vali 扣 teDatet ) 函数使用的正则表达式，让它接 
受2位数和4位数的年份1 


./ A y {2} yy {2} v \ d {2 r 4}?/ 


等一芥。 筘的 骀 ii 代铒好体也篇让 
数的 竽份通过#?没道 a 婀 . 





0 朗的矗剌象2式也让3 1 
老的卑伶淺 ( SISK ……不 
AUt 


EnteMne daifl kw ttva message to be shown: f 03/01 /200 


可以对过去 10 个世纪加上 JavaScript 
支持。 

既然不支衿过去，自然没有理由允许用户输 
人年份仅到货位数的 B 期。.私 实上， 有》『能 
的话.拫本不需蜇 U : 用•在过去約时 MTir 
购空中横幅广告、所以，从验 iiF 代矾中减 
去3位数的年份是项屯要的修补,也将协 


助 Howard 避免被新浮现的 Ranncncjciiy 数据 
输人 H 题攻由 


>妇點— 

■ 正则表达式以播式队配宇 
符串里 的文本 t lh 则衣达 
式耑以斜线 Fi 起。 

■ 除了一皎文本，正則丧达 
式亦由元字符与限定符达 

岈对文本梭式的呸8己 
方式提 供楨钿 的控制 。 

■ JuvaScripl 透过内我 
RegExp 对象耐支持止則友 
达式， 但正 则表达式通常 
法立为】 ilerah 所以很少 
见到这个对象 - 

_ RegExp 对象的1[；叫>方法 
用 T - 对字符串应用£则衣 
达式栈式的 
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剡除3饺数的年份，淡使用达个……或那个 

另一个在正则表达式工具筘屮非常好用的元宇符，則是选替 ( alternaiion ) , ^ 
跟 JavaScript 的 OR 逻辑运算符非常像。但与 JavaScript 的 OR 逻辑运算符不一样， 
选枓只 W 到一个 I ,而 J 1 它的功 W 是让模式指定一连串可供选择的干榷忒 E 换句话 
说.这些可供选择的子模式屮，只耍有_令巧8[成功，就算模式匹紀成功，这一 
点很像逻辑 OR 运算符，因为它的鹿思基车上也是 11 这个，成这个，或这个……" 


1 L/7dL ^- — ^臣 IS 悻式的嘈 趵方式 * 

如果匹配子模式 ihis 或 that, 

模式匹 Sd 就成功 7 \ 

/ small | medium | larg©/ 

f 後粜$ 个速笮太 $ 埒, ㈣ 赛 
L. a $ 种西桡作。 


/ (redI blue ) pill / 

菊 s 的二连 一. P ur 
或 、Ue piit " 符合达 
个堆 式的西杞锗菜 ^ 
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黾从险证角度而言、电话号码不锌太难检查，它们有固定的格式。当然, 
没省正则龙达式的话，还迪栗要相3程度的卞符串分解.但旧则表达忒 
使得电沾兮码皎证只坫小亊-桩。美如的电沾号码拽守下列模汊： 


把电沾3朽桟式取的连字?$ (0 换成斜线，汁 -#] 微调幣 数卞部分的数 
M ：， 則 t 述电话号码模式显然与 R 期模式非常相似, 


/ A \d{2}\/\d{2}\/\d{2,4>$/ 


validatePhone {} 函数变得非常可以 M 阐，郎要感谢电话 W 码的 正則 
表达■^与 validatieRegEx {) 闲数。 


f uncL i.cn va] IdalePhone ( inputField, helpText) { 


i; ■! ! vai idateNonEFpty ( input Fieid r heipText J ) 


: etum va] i dtiteRe^EH ({3} -\d{33 -\cE{4) $/ 


t 


Please writer a phone number (for example, 123-456-7090 J 


H 


! 




究 竟 是 com 还是 ocg? 


你有一封新邮件：验证电孑邮件地址 


解决了电话兮码验证的任务， Howard 最 G 只刺 f 验证电了_邮件地址 
域的挑战。与其他数据一样，险证邮件地址的关 键在干 分解格式，汽 
到成为一以贯之的模式，能用正_灰达式逮立模喂。 


2 鸡 3 个字符的 
( 掌奋发 f 5 


模式 = LocalNajne&DomainPrefix. DomainSuffix 

-^ 


#起来不会很难^—电子邮什-地址只是三段字母数字字符，其中加 
人@和点号 （_) 字符 c 



伽逑 F . 配上述邮件模式的正则衷达式非常简单，毕 a 各项组成都 m 容 


易预测 。 


个字召龙辛羊存起碚 t 




/ A \w+@\w+\.\w{2 , 3}$/ 





@ 符咢后至■丄出现 
个字符 - 




巧之 ~3 个字将的 
字 SMt : 


虽然这个模式达成了任务，但好像 />: r 什 
么， 所有邮件地址郤金遵守这种可预蒯的格 
式吗？ 

I 还有其他可能的邮件楔式吗？谪想想你目前见 

过的各式各样的邮件地址 ■= 



if ) 奶姑 
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邮件地址其实比它给人的第一目适印象吏为复杂。为数据验 M : 构筑4铊 
的邮件換式时，： R : 实还要考虑儿种基础邮件格式的变化版。以下举出 
一些完仝合格的邮件 地址： 


都分色含 






邮件地址呈现了模式中需要匹配可选性字符的需求^ 

结來，我扪稍〒_只是单纯当成字母数卞处埋，却打好几个可选字符点 
缪在邮件地址的各个部分甩*我们需耍合并这呰选用字符到桟式里的 
方式 . 
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从集含中玎选字符 


另一个非常便利、常用，又直接影响邮什棱汉的功能，则是宇符类 
( characterclass ) ,让我们能在槟式里创建受到紧密控制的的子模式^ 
说 m 梧聊一点,卞符类搜於把申常柃电 r - 崎选卞符的规则建立到+ 
模式中。你可以把字符类想成--组成妃 敢一字 符的规酬。 


[Charset eirCItass ] 

字符类是一组匹配电一字符的 
正則表达歲规则。 


在字符类内 T 每个列出的字符都是合格的字符匹配目标，有点像元字 
符间的选#，能迚立可种换的 r_m 式列戒 a 不过，字符龙的结果邡达 
对单_字符的匹配， 除作字 符类后 ief 加上限定符 a 实阮看看范例，比 
较容勞了解丰符类的槪念。 


/ \$\ df \ d \,]*/ 


■V 


别忘记正则表达式特殊字 

imm 關要转义。 

^ ^ 在正则表迖式里具有特瘃意 

义的字符需要轻过转义.才能把实际字符 
放在正則表达式下列字符前均需加上 
反釺线⑴做转义：$, u 7 h *, 


这个橫式并■蝽_像 " $5,，，这4字符 
串也4合它的橫式要求 . 






表箪与验证 


构建邮件摊址验证工具 


加人所有可能出现在 ffl 户名称与域名中的4选字符后，终千可以违立 
更为 牢择的 邮件地址換式 B 

电子啐4味饞的这都分 


* f ' 

棧式 = LocalNaiuG&DomainPrefix. DornainSuf f ix 



t, ** ™ _ .. 



分坷今岛垃穹加 

t "- . 



SU *^ X 的一 郎分。 


f 4^2. 3. 4 个 f 
符的 t 茁戴秘 



述有一点耍记得，成功逮立梅威的方法有很多种，包栝邮什地址模汊 。 

想建立一个成功在现足种数据格式的每个微妙差兒的栈昃， 舛 能比想 
象中 困难忤 多，我们已经体验过，通用模式设 LHn 果行得通，把七转 
换成实阮的正则表达式其实相当 简单。 

笔上踌 ---- 

i 有补上 val ids . teF.msil 0失落的 代码， 这个函数用于验证 
Bo rinero-ci ty 的电子姑件地址。 

function vial idsteErr .^ i 1 { inpur . Field ., helpTe - xt :) { 

// First see if the input value contains data 

if ( L _ ■ . .. .{inputFieid^ tielpText J S 

return false ； 

// Then see 5 f the Input value is an email address 
return va 1 idateRegEx ( f 

m -t. m .1 m .t. m J a J. B ■ d k d 1. B 13 I. d L a b d h Ji b H _U_d ■ U ■ ■ ■ I ■ ■ ■ .1 ■ 111 ■ L ■ ■ ■ ■ ■■ ■ ■ ■ B ■ 19 ■ ■ ■ B II B ■ ■_■■■ _1 

inputField.value, helpText t 


} 
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磨笔上阵解苒 



if < inputField, helpText) ) 邺件珀 钻的正削表迖式的 < 闲 M 

return falsej() A ^ ^ 钱 IH 所章 ii 的 < 碎分 it S’J 表匕式技巧 c 

■ f 甚孟砝少 趙柏。 i 


// Then see if the input value is an email address 

"retiTrn validateRegExl'~ ) / A [\w\.- \+l+@r\w-l+f\,\w{2,4})+$/ 

inputField.value 4 helpText„ _ 

yiease anteran email address [for 6xamp[G 」 ohndc»e#acme,G0m ] 二 

■ 'I ■ n ■ r i r n e I h i ■ r ■ r ■ r 1 p t ■ i 罾 ■■冒 ra p t p i p ^ p i - i i t p r ^ "v ■- ■? r ■■ _ ■« t t - - - r - ^ ^ -■ - - - a - ■•■ - ■ - *• - ■ - *■ - ■*■ ■' ■ •■ - _ r t ■ ■*■ - - *■ 


域名 wj 
兩 2 〜 4 个字礓 
逛字 穿苻作 為穿 


珀户名蛘心？者崧 ” 捋二 V { 

沒 “ _ "^ 11 (r + 

，碣 ’. 这号穹畀尊起姑处 - 


如 I 邮呤柃诅失辁.叩 s 现蚌 
时3尨及砝的妗入格式 a 


布5方全肪护的 Pawwerocity 表簞 

Bannerocity 对空中横帖汀^的数据收.集已经非常完奚，- 
切都耍叼功 T 一些绷紧神经的验证1:作， Howard 卨兴 F 
内 己下了 ，张 i 丁单 + 飞 h 空中一… 

⑸糧 j 太澉动了；終子 M 

3■钫切 U 姑的蚤金^一"—^ ** 

TH 在 I it " b 


E^l^r th« bftnnsr mnftsag«: : Mandango... macho movJfc：. ^#l&! 劣读爭堪和 +P 件祕公 . SES 推孩咋掌 

Errlw ^ IP roda (A tt«» loGHimn. §1 0012~ 严格的发為咚式缒受松 i£t T 

trt»r th« dale tor in* .伸撕明 m o# sntwn: 03/Ti72^R j/ j 

Emtw j«yr n*m*i [$eth Tlnsetman / 

Enlw 仰 rpfwflu nurtibscjf2t2)555^5359 srrtt ， t phaa* nu/udMf flfcr t^rrtptv, i?^4^- M 抑 . ^ 

EnlBf^rEmBi |satt«@m 3 nd a ngo ' ~~' 加帕胂卿 ^. 

EHrd#r Banner I 


产格的數找咚式级受踣^ 


function validatcEmail (inpu^iFisldp he I pText)[ 


// First see if the input, value contsina data 


请补上 validaLeEmail (丨失落的代码，这个 函数用 于验证 


Ba nnero ti ty 的电子邮件地址 c 
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JavaScript 壊字镞戏 

A. ±,-N- — La. I -1— 'KTil >.r-Ii WF I-#- -Lfca. ■& 


这个模式大家应该感到很熟悉〜…填字游戏又来了！现 
在不用再验证了，只要填上一些答案。 



横向提示： 纵向提示： 

1 , 支抖正則表达式的 JavaScript 吋象 fl L 用于 EEfc 文本樓人 & 

2. 当表单域的数据改变时， 触发- _事件。 3. __表单数据，确定数据合法， 

4 ..指定正則表达式 t 〒选宇符的便利方式 。 义使用正则表达式四纪字符串的方法 (method) fl 

7, 这个吋象包含表单中各个域 & 6. 当用户焉开表单域时，触犮_ 事件， 

9. 正 S 彳九达式的特珠字符称为_ 一 S. HTML 属性，能拽一无二地办识别私单内的域__ 

U ). 对麩掂格式的描述。 丨 I .很多时候都很方便的功能，但述常不是对用户4 

12,确认表单城具有軚据的验证是_, ^■数据不合格的最佳方式^ 

i 控制子檨式 tfc 现在正 a 彳表达式中次數的 方式。 
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JavaScript 填宇游戏解答 

JavaScript 填字游戏解答 



QDI3DEID 



340 第7章 























表单与验证 


Page Bender 



JavaScript 对表单有不少贡献， 
所以很难帮任何一项事物 


制逯含掊的変蚤。 

荅薪几乎或多或少郡牵涉到 
数掂，佴究兖如何牵涉？ 

目前位贾 ► 341 

Download at http://www.pin5i.com/ 





























































































































































































































































































































































































































































































































































































































































































































































































































































































































































% 驾取 网克 


命 


利用 DOM 分割 HTML 



利用 JavaScript 控制网页内容其实很像烹饪 。 只是不用收拾残羲刴肴，但 
也没办法享受其味的成梁。不过 + 体将能 完整访 问网页 A 的 HTML 构成要桌, E 
重耍的足，你将拥有替換网贝成分的能力。 JavaScript 让你可以随心所 欲地操 
控网页内的 HTML 代码 + 从而打开齐种有趣的机会之 fj s /切 都是因为 标准对 
象 : DOM (Document Object Model) 的存在 s 


% 
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界面的渴 M 


能用但是粗韃简陋… . •界®银重要 

= 4$的《火柴人 大服》 (Stick Figure Adve„ uirc) s 
2 1 p * ■人 机紐崎 佳范例 s m 它的用户界_歸卢简 

麵聽轉 麵， wm 料■泳 

为丨 、2 rfn t ! L fl 


®ae 


大«人的祙埔出省审腌 

. ft JI 它择玎敁藏 

好。 


o 



Slid ^ figur * Advirityn 


VMcc^e 士 0 

STICK FIGURE 

ADVENTURE 



J 


Click eHher 
buHo ^ to 
^tart … 


Pkasc dioosc ; jlj \ 2 




如 t _ 多了罹颂人 

年 £ 含 c 含打蝌在用沒 
;的:笼 


VourifrLirrwv 6 «fj^ ^ « fort in ^ 





EWe 知道，现在应该动手修正《火柴人大 _ 脸》 
用户界面上的问题了 . 
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不便用 alert 框搏逑锖节 

采 alert 框呈现场说说明的问题在千：用〆_按—卜 _ “OlT 后，场钕说 ^ 新的 《之 聆 》 ^ a^ 

明文字也随之消欠％如果场谈的说明能直接呈现在.网迈上，摆脱恼 

叫 V 等仿下载？ 5 

人的 alert 框,并把故亊 4ff 回网页主体会更奸，下图是 Erne 希望 K 火 / 

贷人 大曾险 S 所呈现的外猊： 〆 


现存 钓诔等 .说喽这嗓 
i 现夺竭枣■!■、气 
凍本 ft 戽的 aleit^i , 
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i » 闷要放在哪里呢? 


使® div 在网 页上创建空问 

为丁在网 M h 呈现场絷说明.孜们竹先镒以 HTML ■元桌在网页上定义 
■块灾际区域 t 才能裒正进人使用 JavaScript 代码的 主题. 既然场罟说 
明0成一段义本， < div > 标签应该很适合保存这段文本。 



ID 刚好就是访问网页元素的方式，当然包括访问场景 
说明的 < div >。 

没错 + 签的 id 域性 "I" 作为从 JavaScript 代码出 N 网 M 

元素的基础。事实 b, 我们已经这样做了■，… - 


< i iV > 好蚤乇个》一石 
的，冗1.无子仅利泛睪 
故甲钓免 f 


味 V 叫 v gi m 吻购 K ._ CeKt _ aU ^ r ^ nter ^ 


，：Qlv id = *ac V netexi ： -. c v£ 5iv><br /: , 
i，L &i ^se choose: 


Vilue=flJ - 吹心化卿 s _ em 

ondicl：-^^^^^. 


同一个网页上的各个元 I 
素 tD 应该有独特性。 


則忘记了、 id 床性的用途就 


是辨识网页上的某个特定元 
素。因此，在指定的 H 页上.各个 id 应 
该拽一无二 f 
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钫问 HTML 元素 


我们已经很熟悉择准 document 对象的 get Element By Id() 方 
法，它 U ： 我们接触网页内部井访问 HTML 元素■……只要元索具 
有独一无二的 


这郎分必场符兮棄的 
d . 傷性 .冬例的 尤棄婷 


var scenemesc = document .get Element By Id (^scenetext 


有了场罟说明元素，我们又向操纵元桌内容的百标更接近了一步。 

但有件半愤得我 们序 _卜 _ 来探究一番- getEl emenL £ ByTagNa ] Tie () 

方法，它能抓出网铒上所有特定类型的元素，例如 div 忐这个 
方法返 lo ] 的结裝数组里，包含出现在网! IX 上的鉍一个指定元索 T 并 
按照出现在 HTML 的咂序排列。 


i 士， scenting sr 卜、〜 n 

y src：_ sc eneO.pr.g ■ 

d:v ^^ ScenetBMC - x / div ^^ j . ;> 

PhTase cho ^ E ft . 


符.爸本 fl 1 的名你- 3 去 


347 


var divs - document .getElementsByT&gMamei # div # ) j 


请参考下列 HTML 主体代码.设计可以访问榷色图像的 JavaScript 代码 t 先使用 
gfi + EleincntById (), 再改用 getElementsSyTagNQme{) n 


^fflgctElemcntById() : 


<body^ 

<C>SefQre starting, pease chesee an *aventur® sureas l*vel ： </p> 
id:* 守 ireen w Mdrwrt.png* alt =-Relaxi ng- />tfcr /> 

之 ipng id^-blu«- arc^blue.png" ^ 1 l=-I rrit.*cina 1 / 卜 

■rtmg id= ， yellow fl sec=-yel Inw.pns* a 4 t = "Fr£izE Ifid' /> 

la-'orang^" src= Grange,png p alt = u ?4r!ilcked a / >^br i> 

•<img id=*red p src=*[ed.png A ;ilt=*>laddcTLi rig* i>> 


</body> 


f^J|]creLElemenL£ByTdyWaitLei ( ) t 
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话参考下列 HTML 主体 代码 - 设计可以访问橘色围像的 JavaScript 代码.先使用 
getEIementByldQ, 再改用 getElementsByTflgName() u 




中的第 4 个一 # 走 
黄 ， 索9鸿孑 
^ 3 , 


使爪 get Element By Id U : doci / wculgetElewan+Mdl ''orange "} 

晚川 getEl et^e nLs By Tag Name ()：.., ^ uwentqe fEleme«taPy ragNaniei "iwg "03 


鸟内在的 HTML 建交狻触 

mmn htm I . 元畚的審务，真士:的泯点都在 t - 元老取存储的内容, 
我们 4 LU 透过 inn ^ HTML 持性.汸 ㈦ 能够保汴文本内穷的元桌.例如 
div , p n . 


innerHTML 特性对 

所有存储在 x 素里 
的沟窖鍉供3访问 


You are standing 
alone in the woods. 



管缰。 


也存兔在 I nnfiiiHTMit . 

ftw . 


documtenc, r getK] erment ： Byid{ ^story "}. irtnerHTM^ 



<p id=*story ff > 

f 

You are standing 

， <strong^a 1 one</strong> in the woods. 

</ p > 




inufTHm & 饵走 f 的蚪有 
内銮. ©抽 *^ TML 的 M 备 
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着 起采 . 没 E — 个 IfTML 无 1 齣构巷 T 
齒该乌取馎 * 容一栲 容累，布达种 玎换坶 7 



innerHTML 也能用于设罝网页内容。 

争央上， lUinnerHTML^miSS ( sel ) 
HTML 内容的使用率, N — 利用它取得 ( get ) 
細使 川串差不多 B 只要把文本字符串指滅 
给坨桌的 irmerHTML 忭性，尤内容即可设 
为 HTML 文本卞符出。斩内奔将取代忏何原本 
域 r _ 疋素的内容 * 


documenc tgc!iL ； LemoniiByid( ^ st.of y J ) , i n n.e rm'M [ . 
- Vou are <st.rong:>not</strong> alone! 


j *, hCTt 4 TWL . 亦巧如本 

fH "舦代_承碓内莓 


/ 





笔上阵 


假设已根据用户的判断而正确地设 S 了场运 说明.镝利用 
frmerHTML 特忖，对《火柴人大岧险》的场景说明元索设買信 
息文本。 
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<dtu> 的扣 I 

"scu 狀了 fi 其 i 


假设 e 根据用户的判断而正确地设《了场聚说明 t 请利用 
fnnerHTML 持性，对 K 火柴人大冒险》的场胥说明元累设 S 信 
息文本。 


dt >* umeKt . getEleweifltiSyld { " ic^nctexr LimierUTML * message ; 


© & ai £ 




卿 ㈣ 如彻咖 哜 cv^riooiJns a ㈣ 1 ^ 

Pka ^ choose : jj 


除了为场：说明 K 域 （ mess : i E e > 增加 ■= d i v > 元素 ， 以及设发 
innerHTML 特性的代码 s 《火 柴人大 H 险》 还需要增加扣变 
tit , 弁设定各罄场杲所諶的说明佔息 ■+ …- 


餃少子拢的冒险旅程 


动；&变岜的场迳说叫为《火柴人大 h 险》 裨去麻烦的蹩总, 


带東史顺料 K 更$受的 m 户体验, 
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<html > 

< head ：> 

<title>Stick Figure Adventurec/titles 


// Update the scene itr.age 

docurr.enL _ get Element By Id ( # =LCsneiirig - ). grc 


fS 用 择 fj 

龙访； s 茂沪设 f 笱 t 
f 妗由害 — 


<body> 

cdiv s tyle= J, mar gin-tops lOOpx? text-alignscentcr *?- 

<img id^sceneimg w src - * seen eO r png w alt—* Stick Figure Adventure" / >^br /〕 
<div id . scenetext" x/d iv>ebr / > 

Please choose ； 

< input type = ,T button - i d ■= ^ dec i^i pn I * va Iue=^I * one 1 ick^^changeScenei 1J # /> 
<i nput ty pesKbutt-or^ id-^dHcrisioni * value s'" 2 ^ dncl 丄亡 kc—czhdirigeScerLetS) — /> 

</tjody> 
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问出你的 M 惑 


卞谢¥•闷 


问;我可以用 getElementiBY - 

IdU 访问网页上的任何元索吗？ 

^:可以，钽需要先为每个元素 
加上独一无二的 id 属性伍 E 在使 
getElcmomt ByTd () &t ^ id 属性 
极度重要。 


任何 HTML 元素的内容吗？ 

答 : 不行。想设定元素的 w 内在 
HTML" (imserHTML) T 该也素 
必项能 矽包含 HTML 的内容，所以 
inner HTML 特性实际上用于设豊 
内容类元素.例如 div h span, p T 
以及其他装栽内容的元素 n 


:使用 i . nnerHTM,L 特性设定元 

素内容时，元索内容会发生什么变 
化嗍？ 

令"：设置元素内容时， innerHTML 
特性一定宄全改写任何原有内容 . 
所以它没有附加 fappetidiit ^) 的 k 
念。 不过， 附加的效果可借由串 M 
浙内容至旧内容上，然后指定肀鉍 
果给 inner HTML 而么成, 

所示： 


elenu inner HTML +- 11 This 




呃，没错、可是我们真的需要担心万维网的标准吗？ 

innerHTML 最初由 Microsoft 创建，作为 IE 浏览器的专利功能 从那 
时候开 始，其他浏览器也开始采用 irmerHTMU 它渐渐变成非正式 
的标准，用千快速轻松地改变 ㈣ 页元志内容》 


不过， innerHTML 并非 准的本 实仍不会改变 u 或许看起来不怎么 
屯要*但关于的概念觉点，其实蛙为了让 RM 和网络应用程 
序能尽 fit 在各种浏览器与平台 h 运行。除此之外，我们也有既可以达 
成相同任务，又遵守标准的方火，而且还比较有灵沾性并强大，只是 
小算很简单 * 遵守标准的方 it 牵涉到 DOM T Document Object Model 
(zmmmm ^ 一组为 JavaScript 提供完整 i 全间控 制糾页 结构与 
内容的对象》 
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见树！ 见林 ： document Object Mode ! ( POM ) 

DOM 提供对脚本女苒 ( script - frienclfy ) 的网页结构与内容的视囝，如果你想 
用 JwaScript 动态改变网 UL 这点作常！赵，透过加装 DOM 的透镜，网页看 


來就俛形成树状的层层元索，树1:的每片叶子是个节点 ( node ) P 直接关联到 ^ 树 枘衅表謫®很奄 

网贞上的各个元索，当树 h 的某节点出现在另_个节点_ F 时 t M 被称为子节点 i _. 

( child ) , 础铁？啵格树" 


: heacJ></ i 1 iiiad^ 


： bod.y> 


id ， 11 story 


5tnnding rcrtg^al°^ /st 1,0715 : 


Lhe wo-ode - 


^ # 00阽树 

择揉钤爷 M 郵 I 

DiJfLJHIfRl 」 g ^ 


</bady^ 


c/htunl : 


POM 把网克视 
为节点构成的层 
次树。 


啤 S i fi ® < < f > 核备 
的交 格敁葙找鈞 空丈本 .. 




DOM. 




P 


Document 


I 

html I 

7 \ 



head | 

wbmhhP 




Is 体 (stion-s) i 本 
X.Dh 厂的均实苷点 ^ 出 

•d 


，You are standing 1 


strong 


lone 11 


r in the woods, 
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节点分类 


你的 A 页是 POM 节点的集含 P 0 M 的节点核 


DOM 树的飪个节点均根据类型 ( type ) 分类 e 主要的方点类蜇对 
应 1 P . 网贞的结构 < 左要以 元索节点 (etement node ) 和文本节点 
(text node ) 构成 a 


梅节点类型分 
类。 


DOCUMENT element 

位于 DOM 树虽:顶端的节点，代表文 对应到 HTML 标签的 HTML 元素。 

档本身，辻出现在元索的卜-一 


TEXT 

疋索的殳本内容 T 一 定存储在 
元紊 K 的子节点电， 


ATTRIBUTE 

元惠的禺性 + ii ] ■透 ii 元素％仅访 
问，仉不会沉梭出现在 DOM N 

里， 


把 T 点类型应用到网贞的 OOM 树上，冇助于 M 请 DQM 理解网页再 
部分的//甙。我们的兴趣特别右茧干： TRXT 节点如何总是立即出现 
在 ELEMENT 元素下,作为该节点内容的一部分 （或 全部内 容）。 


docuheht 




黾巧 ii 过 oow 汰问愿忾 ■ 屎竹也肩 
耷 t ! &的^東度智‘它们耔不金± 


t ri& woods 




ELrEMENT 


TEXT 


「 alone " I 


虽然达 f 的 h 
有孑爷龙。 


Download at http://www.pin5i.com/ 






驾驭网页 


请完成代表《火柴人大 S 险》 的 MTML 代码的 DOM 树， 
填入每个节点的名称 • 也请记得注明每个节点的类型。 
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^ m 


请完成代表 K 火柴人大居睑》的 HTWL 代码的 DOM 树.填 
入每个节点的名称 D 也请记得注明每个节点的类型。 



WCUMENf 


Documciu 


hr lli_| ^_ I^_| ，meh 咖： • I f HpU f I " " I input I" ' I 

rtxT .mm 3 ^Mfiirm 3 

ELEMfNT iimm 
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利闲特性攀餒 POM 树 

大部分与 DOM 的交互均从 document 对象开始，它是文档 T 点 
树的墙上 M 节点 D 文档对象提供各种好用方法 （ method ) t 例 
4 fl getElomenr.EyTdf ) ^ geCElementsByTagName () ,以及 多特 
性，对染的许多特性_可由树上的每个节点取得，有些特性 
其至能帮我们#向其他节点，也就是说，节点特性能用 T _# 览卞 点树。 


nod©Value 

存储于货点的值，只限文 
本 C 属性节点使用（不含元 
桌）。 

diildNodee 


nodeType 

■^点类钯，例如它是 
DOCUMENT . 或 TEXT 飞: 

%、 但以代号表示 t 

£irstchild 


包含节点 k 所有子节点的数组，以 m 节点下的 m — 个子节 

现在 HTML 代码巾的瞰序而排列， 点。 


在 P 0 M 树的节点间 
往返稃劫时，节点 
特性是个儇利齣好 
工真 。 

lastChild 

节点下的最后一个子 
节点 • 


这些特性就是巧妙操纵文档树以访问特定奸点数据的关键，例如使用节点 样忮薄甚 

特性并加上 getElementByldU ( 访问节 点的} 力-法，即可快速分离出某 怒式， 

个节点 6 ./ 


alert.(document .^etF：] ement,rivTd( i, sceneLext w ) ,nodeValue) ； 

本 内®, 

好吧，刚才这个 《火 柴人大冒险》的 例了- 不算很好，场景说明义本 
div 原本就是一片空^但场眾-段终应泫随若故事的进行.设费为 
非常令人佶服的文本 t 想到这点，匕例代码似乎稍微聪明了一点 6 



C 丈鲈人丈 f 险》的泽爭 
茂甙，詗符诒片 




下列代码引用了笫356页的卞点树 f 诘仔细研究并圈出它引用的帀点 


doc ument. get Element sByragName ( rt bod.y f, } [0] .childNodes[l] ,l^HtChild 
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习题解答 





下列代码引用了第 356 页的节点树。请仔细研究并圈出它引用的节点。 



document. get Element eByTagNamei M body ff ) [0] ,Gh.ildSode&[X]. last Child 



ehorfse :' 


5 b C E ^ (@ Jf-Jd'O % Si 货 S ■有 


SefEdfitneFiiffBjTflcMamen j ： fo f* ■闽 

两 i 的 W 有捽去 紝釜 光索 . 则如所 

有 f 


: 对 DOM 树 + 使用 getEleftientBylSU 与使用 
get Element sByTagNatne () 有什么不 一样？ 我该如何 

选择使用的时机？ 

^ :这两个方士提供不同途校，基本上与隔离 单一元 
素或一群柑似元素有关„需要隔离举一元素时，没人 

能打敗 getXlement.ByTdU - 只每秃出元素 1 [^你 

就过关了， 

苦以一群节点为 3 标 ， get ElementsByTagNameO 


是选择 b 假设你打算利用 JavaScript 择藏内铒上所有 
图像元素、首先必 fjfi 调用 qef 〖 ement sByTagNanne () 
函杈并传人自变量,以取得丹页上岈有国嗥节 
点》然后改变 C 5 S 样式<中的 vi , si bi 1 ity 特 H 以陡 
藏所有图涑元素…… H 我讲过头了，下一幸将柯 
到 DOM 与 CSS n 现在，各只要了解 get Elements - 
ByTaigName () 虽.然: X ^ g & LElementByld () 釗1 么受欢 
迎 + 仍在神殊情况中占有一席之地。 


358 第8章 


Download at http://www.pin5i.com/ 









駕驭网页 



DOM 特性让我们能改变网页内容 1维持与网络标准 
兼容 t 


既然 DOM 规 M 奴文裆 M 的一 t 刀为节点.改变 网贞 即牵渉到改曳 
其中的右点。以 it 本内容 为例， 像 dit span , p 这类元紊的文 
字，通常呈现为该元索的7_$点 + 立即出现在元索 （ T 点）下。 
如：文本内容是个独立的 文本万 点，没苷其他 HTML 元右，则 
这个文本节点僻被放在 第一个子节点 的位如下所； i ；_: 


document ,getElernentByld( "story"), f i rsc.Ch ila^nodevalvje 



<p id = 1 J 5 cory 

You are not alone . 

</p> 
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问题孩子 


便闲卯 M 改変节点文本 

如果每个 节点只 冇一个保存文本内容的子节点.就有可能利用 nodeValM 特性， 
轻品地指派新文本内容给子节点，这令方法可以运作，但除非元紊只拥有一个 
节点 * 


documen.t-getKl^nientHyrd>f* i story 1 T ； Lfi!i ： stClr 5： n.d T nodeVa]i；e = mayb-e you are alone ，； 



拓的 亡本 _ 代现有 
的子 f 魚内窑 E 


但亊情不妃得一百_这么简单。如果节点下不只拥 
有一个子节点呢？如下洌 J 



<p id= ir story"> 

You are <st rono >not.< /st rong> alone 
</p> 

这个段落分蘚 
叙 f 个手¥魚 


崦 7足个足尨的立 
车内容,. 




©妁 段琢内容中另耷 
枝苍 ( t « s ) ， 迮有多 
个子？5免》 



如果只取代 m —个 f 节点 + 剌余子节点仍在原处，我们会制造出很奇 
怪的效果： 


document T gett;lamentByla( A ， story i, ). f i rslChi lrt.nodevalue 二 w OK, maybe you are alone. 


代 5 單 一个子 节至，射余子碎戍 
布沒戒变…… ii 个時电绍4 ti 


Sk, maybe you are abne.ROt alone. 
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驾驭网页 


改耷节点文本的（安全> 三步骤 

只透过涪一个了-节点改变节点内容的问翹1在于并未将 其他子 7?点纳 
人考设 因素。讲到改变节点内容，我们其实应该洁除所有 F ?/ 点，然 
后新增 A 有新内容的新子节点。 


O 移除所有子节点， 

© 根据新内容创迚新的文本节点。 

© 把新创逮的文本了-节点附加在节点下 。 


I-. 述步棵可透 过三个 dom 方法 完成： 


removeChild (} 


移除3栎节点下的一令子节点，传人 
将被移除的？ ■- 节点。 



❺ createTextKode () 

从文本字符串创建文本冇点。 


❻ appendChild () 

以诂后一个子节点的形式加入新5点 T 
传入将被新增的子节点， 

想改变范例 "you are nor alone " 的文本内容 . 我们必 頭走过 
这三个步驟：首先确认移除所有子节点，再来创达新的文本 
H 敢后对段落节点附加文本子节点^ 


芴光值用兀 | 执 i 


v^r node 二 docu m cn t«g en Element By Id (■'■'story "]； 
while (node.f irstChi Id) — — - — [ — ■ 


棉辁光砉枘蓽一个子书魚 』 适 
苟孑苷 i . 仿秸防+冷 n 


node.removeChiId [node,firStCh : 1d); 


node,appendChiid(docuiTient ■•createText.NodefuOKc maybe you are alone." ))i 

❺ \ ❹ 


本苄 §,^ yL ^ §. 



釗 i 寺 r 之 I 锌长 


j^K^rnaybe you are alon^^j 

■ ■ . .. . . ■，— 
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DOM 真恬指数 



OOM 餚 询褚# 

本周主题： 

节点讨论 DOM 树的智慝 


HeadFir *!： 我听说你是 DOM 树存»单位的最小部 
分，冇点像 HTML 内容的原真的吗？ 

节点 （ Node ) 3 我不太确定自己有多么像原 f t -多么 
具原7_性， m 我的确代表 DOM f 对中分离的信息。你 
可以把 I ) f 3 M 想成把网页分解成非常小 1 比特大小的 
信息……我就是比特大小的那个部分。 

HcadFirst ： 这有什么重要的吗?讲来有点央礼,但能 
够把网页分解成小段数据，离的有那么捉叫？ 

Nod t ; 如果你虽觇访问成改变 M . U ]： 内容的 i?h i ■午多脚 
本就很亟视内容的改变,此时 OOM 就雄常 1® 要了。 
m DOM 屯发:的 真正原 因，其实迠它能够把网 页分解 
成细小的片段岛部分 6 

HeadFirst ； ，你在分解网此时，是否也 M ft 失去部 
分网页的风险？很多人 Ad 动 T ， 拆开东西， 结果 都是 
mr -椎破铜烂铁 t 接 f 來你就发现大家把东两弄坏 

Node ： 不会、没有这种 ㈣ 题，因为把网页读成 
节点树时.并不需耍夹际把一切部拆开来 。 DOM Rt 
提供树状视阁 ， 无沦 你是沿打算雛贺或修扨网奸 t 的 
数据 * 

HcadFirit , 太奸 丫， 让 人 松了 口 但如果 栈托 的 
想修抑昆不是就轮到你登场了呢？ 

Node : 适的 D H 小过我 的用途 不 限于 •修剪 -你也4 
以仵节点上加人网络 数据。 

HeadFim ： 听起来很棹耶！要怎么做哫？ 

Node： 你卷，网贤上的毎坱信息，都敁塑造成树卜 .的 
一个节点。所以你可以透过我——节点.访问网页 h 
的任 M 舡物 。 或者 T 你也能利用栈创违全新的数据， 


然后再把新数据加到$点树上。 DQM 貞的指常打炎话 
性， 

H ea dFir St ; 听起来很聪明 a 不过，我还是打个疑 
——你和元索究菀如何产生关眹呢？你们其灾是同一 
个人呵？ 

Node : 没错，本实就是如此. 但我比 较进歩-点。 
还 id 得元柰只是另一种 .# 待栎签（例如 < div 、 
< span >) 的角度叫？网 M 上的每个元忐在.文枵树中都 
为一个 y 点——从这个角度来看,我和元素并尤 
:■致。 不过_我也能代表存储于元忐+的内容_ ma 
m^-F < div > 的文本本4也足个节点，存储在文档 ㈣ 
中的 d i v 节点之下 a 

Headfirst ; 听起東还是有点混乱 郎！ 你要怎么区分 /fi 
者和它的内容有何不 ㈣ 哫？ 

这个嘛……身先，存储在元桌（或节点）巾 
的 A 容 ， a DOM 树中一定是该元泰的子节点。其 
次，所有 ■界点 都可依类翌 E 分： 元柰节点的类型是 
ELEMENT , 文本节点的类型则是 TEXT 。 

HeadFim : 所以 T 如果我想访问某个元柰的文本内 
容，是否只需#找 TEXT 类型的节点呢？ 

Nc * dc ; r 相实可 d 但诰 记得. TiCKieType 特性其实返 
冋的是毎种节点类馴的代例如 TEXT 类聖的代号 
足3, ELEMENT 娃 U 但 K 实+用这么麻烦，因为你 
只忠要找寻元忐节点的子节点，就能取得它的内容。 

H * adFir Sh 我 懂了。 感谢你拨冗接受访谈，还说明 
了 DOM 树的各种奸处^ 

Node ： 別客气，如果你对“树芋术”的话题有兴趣， 
别忘记再找我 h _ 节目哦! 
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X 犮有 盡向热 

袖(砸 

m I 


闷： 我还是不太清楚子节点 
和它 们的组织方式 & 例如， 

Chi . ldNodes 特性究竞如何运 作呢？ 

答: 查节点内包含数据时， 它就是 
个父节点 （parem node ) | 其中的 
内容則被卩 OM 舺怿为子节如 
果教相苽只由纯 丈本构 成，則分醉 
成许多个子节点 t 某个父节点下的 
所有子节点将以数纽存锗 n 出现在 
父节 A 的 ehildModes 种性 里 : 子 
节点在教组里的存诂峒丼 ，則与它 
们出现在 HTML 代码时的碩序相 
同 ， chi ldNodes 数组的系 一 +子 
节点即 T 使用 childModes 〖 CiI 访 H , 
也能以诚环处理这个教妲.以访^ 
毐一个子节点， 



■ I ' 1 T 

\ ^jpj 大 H 

pFietn ^ jdN ^ e «[01 个+ H 


St %& ri ^ 丸蜃■节 
个+ n 


^在移除某节点下所有子节点的 

代码中 * while 循环的瀏试条件如 
何运作？ 

答：你讲的 while 掮 坏是： 


驾驭网页 


whiic(node firstChild) 

这崎涮 试会检查节 A 是否含有第 
一个子节 A D 如果系—个子节 A 
还存在， while 褲坏上下文中的 
结果值将为 true , 因坏继续 
F —轮运作。如果没有第一个子 
节点，則表示匕经沒有其他节点， 
此时， node.firstchild 的結東 
即为 null t 将遑成 while 调环 
上下文中的結果法为 f alsei； 所 
以， while 氓坏其实在检查第— 
个于节点是否 巴为 rujii , 由此再 

推导由有无子节点聘身暗处的結 
论》 



JavaScript 冰箱礤锇 

_兼_《火柴入太忌 m ㈣ 少了舰 ㈣ 要制 9 辦職刪上的磁 
铁，完成改变场滎说明元第（节点）的文本^磁铁可垔茇使罔。 
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JavaScript 冰箱磁铁解答 



JavaScript 冰箱礤锇解答 

与 DOM 兼容的 《火 柴人大肓险》代码少了好几坱車要代码 E 谓使用我们附上的 
磁铁+完成改变扬景说明元柰 { 节点）的文字。磁铁可垔复使用< 



2节孑眘克. 純 n 


在. 砵讦.就金鏟遠， 


芝先 fi 用见抓 .软 


锖总 必场 洚没有椹 
式化玫 HTMt , 杆-备栌 
终 it 


// update the scene description text , 

docu m ent.g^El^nt/ld( ^ BC.n^e^ 


卿― t 、| 1 上口 h … 

~appfindCbii 1 d ^(document.cr&ateTexS'-Node( 


鋅 该蜱除 货尹戊明允舞的 弟_个 3 

苷点，迹纠不 A #J 下兄叼孑爷 s ^ ^ ^ ^ ^ 

^ ° 现存孑赛系3绍清除午垮 . P 係 

证沪 i 本罕卓的射知埒 C 威宠螫 


式粑知 S 诔卑说妒书长 T。 




复习要点- 

■ iinicrHTMLS 非 人维网 的栋准，但这个特性能访问 
元素内#储的所有内容 t 

_ Documcni Object Model '( .文档耐象模胡 ） T 简 
称 『> OM , 极供访问和修改阿 M 数据的标准化叽 
制。 


■ DOM 视昀贸为关联节点的 L 4 次树 .， 

■ 使用 DOM (而非 itmerHTML ) 改变_页内嵙的方 
桊，羔移除元素下所有子节啟，然后创建并附加上 
包含新内容的新子节点 # 
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驾驭网豇 


乌标准兼容的大冒险 


贼从嫩 ■歡娜-式. 



f ……好吧，隨奸賴 wn m 奸台面 F 使 

J DOM : 从而射 r 敢新 的谜贿氣以嫩_代码也料 

__紐的-面 t ㈣ 们賴 DOM 强化版 《火柴人大语险》 
的满足盛，就来針立的内在。 


POM 是种符 含万维 
网标准的 HTML 操 
纵方式 * 它能 K 
iwnerHTML 特性达成 
S 多操控功能。 
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改萑你 的透择 


辱找更佳选綠 


动态的场汶说明已经做了两次进厂大维修.但神秘隐_的选项按钮仍 
然待在《火柴人大胃险》的贞面上6我们-，定能 U ： 故事导览过程比起 


选丨成选2更冇参勺性，更义宜观简单。 







Hf 仔细想想，没人觇定非柯利用表单按钮采做选项 只垫是 

畤以包念义丰的 HTML 元索都能及#匕作。 CSS 样式則可妆点 
丨 l_.7l： 索卷来像输人控制类的元素 
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驾驭网 m 


设计 更好、更子净的选项 

既然 《火 柴人 大罝险 &的全新改以版决策选项，将是能包含文本 
的 HTML 疋忐，即可进场，用干动志改变每幕地贵的说明文 
本。因此每幕场嚴•将依裾场罟说明而设定决策选项，而且.这也 
表示 change Sc ene () 闲数需要两个新变迓 • 以存储决策说明文本 
decisio.nl 与 decision 2» 


下面兩范如何在 chanq&Scene{} 兩数中把 Scene I 转向 Scene 3 后 t 
设定 Scene I 的决策 说明： 



curScene = 3; 

message = ^vou Are standing on the bridge overlooking a peaceful stream. w ； 


decision .!^ - 

deci & ion 2 - 


41 Walk across Bridge' 1 


—Gaze into Stream ^； 



iiecisiQ^t ^ dedsimi 2 用 
彳存蝻#定泳: f 栌戌明 t 本 


上阵 


想为{火柴人大 苜险》 提供动态选项，我们*要新的 HTML 代码表达方 
式。请为新的文本元素设计代码.用于取代现有的 dnput ^ 技钮 t 

煜示 3 賊 T 新元素的 CSS 样式类 ( class ) 称为 decision " f 第一个 
元素内容的初始设定则为 “ StarLGam ， 。 


Pkue chucae : I 1 2 | 


^ 1 軔 fl 麯&洼埼 _ f 
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m 笔上阵解苔 


想为《火柴人大 M 险》提供动态选项，我们霈要新的 HTML 代码表达方 
式。话为新的文本元索设计 代码. 用于取代现有的 < in PU c > 按钮^ 

提示： M 予新元笨的 C 55 样式类 (xbss) 称为 勹 ecisiorT ，第一 
个元莱内容的初始设定则为 " StarLGame '' , 




■答 


重新恩考节点文本 f 换功能 



O 

0 


《火柴人大習险 S 的全新动态决策说明机制 + 现在只差实际为 span 元 
桌设定文本的代码，这段代码最终将勺梢平的动志改变场罟说明文本 
的 DOM 代码执行相同工作。舡实上，我们闲 此看到 了问题^——现在 
滿要对三个不同的元桌运用完全相冏的文本替换任务， tiiSi 场该说 
明元素,以及两个场彔决策元泰…… 
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驾驭网 M 


改用焱数取代节点文本 

有个万用的节点文丰替换函数将怍常方便，而 R + 只《火柴人大管 
险&有此需要，这类函数就像我们稍单研究的场景说明取代代码，不 
过这次的代码要处理函数自变缺。 


^----内奋枓硪勞淘 的开点阳。 

function replaceNadfiTex l{\6 t nevfText) t 

… \ . … 

■ 於说入辛成奸 a 冬办審。 


Q 定义的 £' 印 1^01\]0 如 1^ 又 1：( ) 函数接受两个 S 变 M: : 内容将被#換的 
ff 点 m ， 以及准备放人节点的新文本 内容， 使用这个函数，可改变网 
豇 I-. 任何文本存储疋索的内容，以 《火 柴人人 p 险 ) ） 为例，这个函数现 
存 . 能让我们动态改变场读说明，以及同时改变两个场耑决 m 选项的说明 


……当然，你得先把它写出来 D 


保.我 IHfliii 函數硪 



repIaceNodeTextl^sceneLext"^ 
repl aceNodeText { 41 dec isionl^r 
repIaceNodeText (* ! decision^ 



message )j 


U 妒飱矣 嗲代谗 I 

说 1 fi 


decisionl )； 
decisions )； 



电交茶译 ; A 策钤说 
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麼笔上 阵解答 


，上解阵答 


设计 rsplaceNMeText () 函数的代码，它 M 替换节点内文本的万用函数， 
而节点透过 ID 掖引用。 


值用元泰牲布 

的 ： JD 84吒太最 

移哚书.电 T 的 
珩苟+爷至 a 



别忘了函数可接受两个自变置 + id 与 newText. 

function r £ pjjiceKp 4 eTextnd r hSwTeKtM 

sjdi. at j •■■<-■■ - £■_ i.^.. . - - 9 ■«■ g r - - ir-rR-r^r-i r i ■ ■■ ■ i ■ i ■ ■> ■ ■■■_ _ ■ ■ i ■ ■ ■ ■. j n j b ■ ■ ■. a 

?ir wode - mef * t g « If k we n tVvld (4 d \： 
hile ( hode.fi rstChlld ) 


玄 本釗連 新的孑 
奸戈 i 本 ; i # 。 


node . app £ MdCKifd ( doeuvHeMt . er «3 teTe ^ fNciide [| ifiwreKt ]); 



cTffflt #!，* tNw "0 A ift 只 ft 沒 
JoCKWff»lt 的 象 f 任 浓」 ® #t 不食 £ 
謹耷料定荼走户 t 英碎： 


动 0 选项真 正 好 

新加人《火柒人大 w 险》的动态决策文本.比起 in 版的按钮直观多广。 





廣的功态，鬼诘栌 r a ■用卢沒楚 
知违兹事的毐个诔.爭£ 含噼# 送 
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驾驭网页 



我还冰为 hiah 叫 ht 和坨？的视觉 
绞 果都岛 G 5 S 布兵，兩乎盈 POWU 


没南 M 问极 

泛寿蠢问 m 


:为什么采用 span 怍为 《火柴 
人大冒险》的判断元索.而不是 

d iv 呢7 

答：因为决策元素需要并排 X 
现，它们不能是需要换行的块元 
素 （biock element ) fl d i v 是个 
块元索，但 span 则是行内元素 
(inline element ) B 决策需关行内 
元素，所>乂采用 span s 


问：当我使用 createTextNodeU 

劊建新节点时 T 节点会跑到哪里？ 

答，- 哪 JE 都不会去 4 从杲个 H 页 
的 DOM 树的角度来看，削开始创 
建新的丈本节点时，它馱浮在空 
中。直到你附加它为另一个节点的 
子节点，它才真正加夂节点树，然 
后才加入鬥页里。 


问:以 createTextNodeU 创建 

的文本节点内容只能是文本吗？ 

是的。 DOM 的作用方式不像 
innerIJTKL t J & 者可以指派況合了 
标答的文本 D 当 DOM 提到“文本 
节点” t 它的意思真的是单认，没 
有其他悴签或附加格式的丈本 t 


更加改良的交 S 选顼 
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相对千晦涩不堉的按钮前辈，《火柴人大冒险》的动态决策文本已 
嚴改以的，但百尺竿乂-总能 疋进 一步。堆例來说，边可以在 鼠栎指 
针移过动态文本元素时自我强调 ( highlight ) ,显示出可以桉下去 
的样 R 


> 笨丈本 允耷存冢杬雅 M 帏过 
的 f } 教踢 H 


highlight 的确与 CSS 有关，但 DOM 还是能直接干涉。 


强调网贝内容的确追 css 的议题，因为其中包括调聱元素的 
背忒颜色等 ( EDOM 也是强阅等儿的-部分，閃为它极 


供了对元尜的 CSS 样式的访问 


Ekwr 








祥式的闽题： CSS 乌 POM 


玦茱： if 的样 式发疋号味 
子视觉4瑞= 


fissm 尽垦别把 css 
L«P 關式类与 
• JavaScript 的类 

注意I搞混了。 

CSS 样式类和 JavaScript 的类 
两者的差异#常大^ CSS 样式 
类是一组样式，吁应用 i 网页 
中的元素；而 JavaScript 的类 
是个创建 JavaScript 对象的模 
I 我们将千第】0章详细说 
明 JavaScript 的类和对象 4 


DOM 透过节点对象的 elassMame 特性，提供对桌#式类的访问， 


alerc[document.get Elemen tBy ： cjf" decisioni * 1 ) .dla,ssNanie); 










驾驭网页 


交换#式类 


rfeeiffiioiiEiiveTffff 


轉戎 ft 


想使用完全不一样的样式类改变元忐外观，只需改力男一个 CSS 样式 




docu m enn. g et El erne n t By I d I u decisionl w ) .classtJame = fr deci si on inverse w ,r 


扣两的浹 it , 不闷 
的纪 t ! 





他用^35^1^1^特性改变允柰样皮类， Y 叩改变元.索外观为新样 
A 。 这项拄巧可用干制造作常戏剧性的网页元粜外观变化，而又 
只需耍相对较少的编程 J ： 夫。 



/atyi o 


-=style Lype = A ^^xz/cjB3 ，r > 

spAn .d&ci 曰 j.oqinvec bk?[ 

font-weight;bold; 
color ： PFFFFFF - 

〆 bordc^Ci tii i n stil id mpddddd , 1 
back a roynd - c & i ^ rr # U 0000 t 3； 


笔上阵-- - --- 

请使用两个与瞭■标有关的事件 cinniousc^vcr 与 onnouseout ， 对《火柴 
人太冒险》的 < 3 pan> 决策元素添加代码，让元素于陚标指针移过时，出现 
样式改变的强调效果。 

提示：鼠标移过 (hover) 效果的样式效果名榇为 dec：isionliover. 

opan i [J= J *dccisioiil rt class- ^decision™ oncl itk=" , 'chcLr]9e'SotneU J 11 


>£tart Game<,/span> 

a ■ • a a <• • a a a • .i ■ d a >i ■ i B Ja ■ 4 it I m Ibl ■ I K I B J h I ■ I ■ I ■ I ■ T ■ I ■ r ■ r ■ r f r ■ r 9 r 5 B II P 9 r 1 r 1 T 1 P 1 P 1 rtF 

<span id-^decisionS" 1 class^^deeision" OFK ： lick="changGScGnc^2) 


>< / sp ^ n > 



目前位 S > 373 


Download at http://www.pin5i.com/ 








禺笔上阵解答 



笔上阵 


请使用两个与 M 标有关的事件 onmouseover 与 onmouseout ,对《火柴，人 
大胃险》的决策元素添加代码 h 让元案于 m 标格针移过时，出现样式 
改变的强调效果， 

提示 t 讯标移过 (hover) 效果的样式效果名称为 deckionhuver :。 


FJ :要创建子鼠标指针移过时出现强调效果的按钮，我不能 
只使用 CSS 吗？ 

答： T 以， 而及在很多状况下，只使用 CSS 创建强调效果的 
按钮才是比较好的方式，因为各类洌見器对 CSS 的支持程 A , 
比对 JavaScript 的支持更广泛 < 例如在某些移动设备然 
而，《火柴人大冒检》是个 hvakHpl 皮用程序，可做到所 
有无法单独以 CSS 达成的效果。所以 s 在这个例子里，使用 
JavaScript 设计场景决策桉钮并非不利, 


t)Orderic hih 
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贺驭网页 


测试加 上样式 的选项 w --— V . 

苹奸 DOM 能够应观众嬰求改变忐的样忒光 + 《火柴人大罝 险&的 r M 齣强 iM 放 

m 户界面做了改善。 Elli £ 现在觉辨她的脚本史好了 p I 





1 °) ； 我不记得听过 onmiQusepver 
与 on mouse out. 事件，它们也是榇 

准事件吗？ 

^ 1 是的。亨实上，我们 述有很 
多标准 JavaScH P L^ 怦没有付论。.但 
是， 亨件的重点在于我们如何对乎 
件反应 t 就算不£得清楚知道亨件 
H 以两令鼠标相关事件为例， 
只要着到 它们的 名称，你就大杈如 
if 其中之一 于笟标 43 针移过 (over) 
元素时犮生，另一个刖子轧标指针 
移士 <out) 元彖时发生。 


H r 为什么在设定决策元 
素的样式类时 t 不需要使用 

geLElement ById ( ) 呢？ 

: Ja vaStrripl 的 I 令元素却是一 
令对象，在 HTML ■代码中我们能透 
过关键宇 t h i s 访问相对于某个元 ■素 
的对象，所以在《火染人大耷险》 
代碍中，关健字 this 即丐为 span 
元素割用节点对象，这个对象則具 
有访 FI 该又+样式类的 c 1 cissNam.e 
特姓。所以 T 改 t 样式类只需辽定 
c.ti i s , classNai 3 ne fl 


^ ^样式类是不错，但我只想改变 
一个样式特性而已，有可能办到吗_? 

^ 你的土觉真准！ Eilie 其 

实也很想解决 < 火乘人大 宙險》 
这个问題，斛决方式則刚圩与使 
用 JavaScript 和 i 〕 OM 单挫操纵样 
式特性有关 …… 
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没有名称的按钮 


选项布问翘：空狻钮 


《火柴人大 ff 险》 电 一1 都有这个问题， Elhe 到 Fi 前为止都在怼耐 n 
但现在应泫起 身处理 那呰径异的空选项7\在某4场眾里，其丈 H 有 
一个选项,但两个决策元素仍然都会出现，如下困所示 fl 对用户而言， 
濟到没有信息的决策元崧实在有点 ® 身不舒服^ 





边有哪爸埼景具有空选项的问题？有什么修正 
的方式呢？ 
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调蝥单顼样式 

冇时候，改变元素的整个样式类灾在太过火了。篮要细微阒整的时候， 

就辁到 style 对象为我们服务 CSS 样式鬼的 visibilitv 特性可 
设定 7 t 桌的 证系 或隐餞。在《火柴人大宵险》的 HTML 中，可将第二 
个决策元桌预设冶隐兹， 如 r 所示 

cspan id- ir dGCLsinn2 ,r €19 55=^ decision - ondick-^changeScenefa) rf 
orLmouseov ' er ^ 1 * this.c 丄 assName - H doc is ion hover J H 
omnoiiseout = 〃th is.c] 二 ■ l dec:iEjic>n『* 

style= a visitiility ： hidden # ></sp t in> 


节点酌 style 特性 
搔供对单 一# 式特 
性的诂问。 



Joc ji^eril ,qetElementById("dec!sion^^},style.visibiliLy = u h idden 


《火柴人大冒险 》 有些场芾必须在切换到下个场芾时 t 调整第二个选项 
元素的预设显示。请图出这些场軎，并注记这些场芾应该 S 示或隐莪选项 B 


#二个该场 
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磨笔上阵解答 



笔上阵 
I 解答 


《火 柴人大冒睑》里，有些场罟必须在切换到下个场赍时，頃整 
第二个选项元紊的预设展示 a 话圈出这些场景，并注记这些场景 
应该显示或隐葳选项。 


第二个逢筠 


充_个选成（:例 
i jh 年齡否茂想 


达汸 叶绍杗 吋. 某 二个送 
右 说战鑷 ， fS 达场板炎必 
夺辜致技$諄采 的沩 f f 


Llttli I 
home Ip 

fl ^ 一 

thewDQ'di 

ly 
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复习要点 -- 

! m 借由改也负点的整价样式类， classWame-ViMm 
达成戏剧性的样式变化， 

■ 借由汸问节点的单_样式特性 + styled 点特忡达 
成少欤样式变化。 

■ CSS 样式类 yjavaScripl 类完仝无哭——它们足完 
全不冏的东两。 


驾驭网页 


网既元老红 r 利用元索对象的 vi eibi 1 i ey 样式特性 
做动态的显示 成隐敌 fl 

辟式 辞行 UCi . 在相 fel 的 S 毯茬 
果' 设宏方 式 冷： difpla ^. nirng (孩域） 

或 ditp(*f ; 6ioek ( -ff 夺） 


不爯出观假选琐 

使用 DOM 操纵单一样式;，即可选择第二个选项元素的显示 
或隐 j @ L 结果则 it 川户界 ( M 史合理 + 因为空选项元桌已经消 




—-- 呀 1 嗶 AAmnw * 
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我们的老朋友：决策树 


更多迭顼，更为复杂 

Ellie 想象着 t 火柴人大■险》的故亊情节飞跃性地成长，呈.现各种冇 
埵的新场这与决策选项， DGM 冇很多 t 办助处评《火柒人大 O 险》 的 
赵汉 e 复杂性的方 



吏琛入的 f 险= E 大的决策树! 


11 鼉拓喊 《丈辣人走 ff 辁》6铉上钱.毐辞伢栌鵠辟诂如。磧 i 
http , / / e ■山 6 F . Com/tetrks/hijs/ T 教 .i 
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若没有测试决策树的方式，庞大 
的故事肯定变成大问题。 

故亊惜节随右处多场最与决策选项报 
慢联开，故节的逻铒也变得难 LU . 斕试」 
难以确定每次选择的路枝:都会〖1-: 
确的地方， ■« 火柴人大 H 险 》严魏 
要分析故丰怙节路桮的方 
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依涵轨边 


追踪决策树的軌迹 


网络浏览器冇个历程圮彔功能，可圯踪我们浏览过的网 
页，《火柴人人宵险》的决策树历程 ki 录功能 Mij 可测 U ： 故 


邾佶节并调试，我们打贷撝示…系列汙向特定结码的决 



I Ellie 叶借此确定决策轨迹如预期 般远怍 


决策历程迠，份特定情 Ti 路径的选项勺场说列表。然后这份历程列忐 
4用 T 故电情节的调试，让 Eillie 回潮过往选项与场录„ 




382 第 8 音 


Download at http://www.pin5i.com/ 



驾驭网页 



从 HTML 的免度来石,决策历程的代码还不笕太钇 杂： div 元桌加上 
W 录选项的文本段落 （ p > t H 番耍这样就够了。 


你谀3 * 我们不铨 

鼸纛剞違斯的段霣 

…省呀能嗶7 


DOM 能随意创建任何 HTML 元素. 当然包括文本段落。 


朿实上，就足可以随盘创违。现在牵涉到另 •个 document 对染 

的方法- c r ea teRl ement (), 顾名思义 T 这个方法可创 i £ 任 

何 HTML 元素我 fH 打算使用 createElementO 创建新的容器 元素， 
然后利用 createTextNodeO 加人新的文本内容。趿后将仵网沉的 
iV 点树上桟上一条令新的节点分支， 
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把 HTML 玩得天翻地覆 


操纵 HTML 代码 


叱用 creaneT 打 tMod —) 方法创违新元素只盖些标签名称，所以，创违 
段落文本 （ P ) ，只忠要调用这个方法 片附 变说 “ p — , 诰 确定你 
会紧紧抓注创迚的元素。 




var dec isioriSlen - document .createEIement(^p ^}； ■ 

现在 t 科个新的 i 没有内容的 段落元 右，也还不娃任何网51的一部 
分。若想对元索加人文本内容，则应创建文本节点，而后将 K 附加至 
新 p F 点下作为爸节;^ 


-1 


dec i □ ionElem. appendChi Id (document,c rcat eTexx ： Node ( ^Decision I > Sct?ne 1 : Fork in the road^ 



敁后一 则是在 M . UU : 新增段落元系' 〖1:七成为 div 历稈记尕疋素 
的子节点， 



Hik 《火柴 人大肖险》发生场饺转换时 I ■[复上述步骤，即动态池创建 
/决策历程记彔。 


384 第 8 章 


Download at http://www.pin5i.com/ 




驾 驭网页 


复习要点--- 

• 利片 Idocument 对免的 creat:emement U/j ■法， ■ 梏由小心地新增 U 移除 DOM 树上的节点， N jJi f>f 
能够创迚任何 HTML m 以随麻拆解与 

■ 矜溢新增元桌的文本 内奔， 必须创让-个文本内容 
r - 元岽，并附加至元素下。 



笔上阵 


谓为《火柴人大冒险 S 的 Ch d ngesc ： ene [) 函数新增程序代码 T 让它支持决 
策历程功能.提示：你需要 T 目前的场 聚不力 SceneO 时.在决策历程元 
素下，新增附有文本 子元革 的段落元柰.然后于 Scene (场 SO 为0时洧 
除决策历程 


function changeScene{de-cision] i 


// Update the decision hi Story 




I 
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磨笔上阵解苒 



请为《火柴人大肓险》的 changeSceneU 函数斯增程序代码，让它支持决 
策历稈功能 a 提示：你黑要于自前的场蚤不为 SceneO 时，在决策历程元累 
下，新增附有文本子元素的段落元累，然后干 Scene (场虽）为0时滴除决 
策历程 # 


i ^ T. rfn 

K- R ) 褒的一 


以决萊戾 緣作&铋複和 





















STICK FIGURE 

awewtwe 
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永无止境的故亊 

潘长35忮异的旅程 ■ "… 

现在換你样放想象力， r 展《火柴人大 g 险》 的故本,1上它的规模疤 
适仓决策历稈调试。火柴人正等若新的 e 险呢…… 


写出你自己的《火紫人大苜险 S aEt 增加 一些能 与现有4火柴人大胃险》程序相衧的代码, 
成为可以和人分享的在线互动 ■险， 

这一题没有标准解答……开心地分号你的_险幻想吧！ 
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JavaScript 縝字遨戏 

在你进一步投入火柴人的冒险前，轻松一下，体验我们的填字游 
戏吧 [ 



横向 提示： 

J + 在 LH 3 M 树！士现在另一个节点下的节点，称为 


4. 用于取得节点对象值的特性 u 

5, 用于设定元素的样式类。 . 

7,调用__方法，以取得某一类叶象 . 

10存储文本内宕的节点 类型* 

11 . 等同于 【 ITML 标签的 DON 1 节点类 

12 . 在节点下新增于节点的方法 ( method ) , 


纵向 提示： 

1. __方法可创建 HTML 元素 a 

2 . DOM 树龙最顶端的节 A 。 

3. 用于改吏 HTML ■元索内容> 但非标难的方式。 

6. 讲述在故故事的笨拙方式。 

S - 忾页内容的 DOM 树上的一片叶子，称为 _ 。 

9,用于访问元素的茱个样式的特性， 

13. 设定 HTML •标签的_属性，使标签可为 

JavaScript 访阿 D 
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JavaScript 填字游戏解答 



JavaScript 垠字游戏辉答 
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使 ffi JavaScript 的设 i + 师 ， 邾索小心 


别让 POM 牵着走。 POM 碥实星个 
儇子诂问 HTMI 标签的方式^ 

但小心剔变得太逮操纵一切. 

否则你可能让节点工作过度。 
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9 为数猫带采生命 







JavaScript 对象不见得总像医生说的一样阴森可怕。 仳它 们桥凌起 hvaSdpt 
语言的怵林总总，所以它们闭结在•起的力诖比较大 。 对象结合数据与行为 ，以 
创违-种新的数据类型，比起我们到目前 A 止 ! AL 过的芘他数据更“活灵活 J 5 T - 
你将 学判可 以自行排序的 数据.可以 自我搜索的字 符串*坯存会长毛，会在满片 
时％哞的脚本！掖后…项可能足我眈说的， 心过你 了解我的宜恐了…… 


Download at http://www.pin5i.com/ 
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开诹对啰! 

JavaScript 孖浪对 

即将 W 场派对*你要负俞发出邀消函，现在 的酋耍 问题就是：完 
美的派对通!谪函上》该有哪栈佶息? 


钶人？ (who) 


受邀人士 


诃事？ (what) 





S M M Wspla y)^/^ 




何对？ （ when) 


ffM? (where) 





* tl (% s 


呈現钕据 



1 




逢送【 (Pellvcr) 


传递数据 


一份給] aVEiSeripl 的派对邀谪函,匕数据将披银造成变陡，行 
为则被塑造成函数。 IW 题在 TS 现实生活中丼不存在分离数据 
与行为的能力 n 



在现实生活中 + 邀诸函结合 r 数据 q 行力力 个 单实 
体——也就是 对象。 
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数猫*行为 S 对象 


在 JavaScript 里，你不会只遇到分开工作的数据 { data ) 与行为 ( action ). 丰实 
h , hvaSuipt 的对象 { object ) 结合了数据与行为，成为一种全然不同的数据结 
构，其中可以存储 ( store ) 数据，也可以裉据数据而行动 （ act ) D 这项功能使 


得 JavaScript 能把现实生活的思考方又运用到_本上 a 所以我们能依 u 亊项_思 


考，而不需受限十数据与行为， 

3我们从对象的观点査希邀淸函时，你将 看到: 


对象 


数据 

var who ； 
var what ； 
var when; 
var where ； 


在邀洁函对象电, 



数据与涵数一起存仵，钆比起对象外的联系更为紧 


行为 


function display(whaL P wheil,, 


funetion deliver!who} 


夺时象 4 的盎 H 
金 "jf 的彩式达 f 考人 S 数 a 


where } { 


function display 0 { 


var wbo? 
var wh^-tr 4 
v&f wh'STi t 
var where? 


func 匕 ion deliver [} { 


密^说得更仔细点，放在对象内的闲数 4 以直掊 iMnUHiW .的变 a . 





对象在一个 
存储容器沟 
链捿変蚤鸟 
I & 数。 


邀洧函对象5.的数据可被豳数访问，但对象以外的世 
界都看不到这种钕据。所以对象足个容器 + 其.屮存储 
数据并链接数据 q 依据数据行动的代码。 


rfii + 需另外用自变贷把变 tiH 专人函数。 


When 


Download at http://www.pin5i.com/ 
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会员独享杈通 


对象搠有 I ) S 的数梅 

当变 Sri ： 函数被放在对 象里， 沿们都被 1 i 成对象成员 (object member ) Q 
更详细地说，变蛩称为对象的特性 Cpropoerty ) ,函数则称为对象的方 
法 （ method ) ，它们还是能存储数据 1 依据数据而行动，只迠这些亊情 
都 H 发屮在特定对象的上 F 文中。 



痴法 


痴法 


对象中的特性 


函数 


when r wViere) 


function dispii*Vt^ a -- 




: i 


furiction deliver(who> 


对象 




乌方法等子对 
象外的変量与 
凾数。 


特性与方法乃被对象“拥有" ( own ) + 意思是说，它们存储在对 
象 31 ，就像数据#储在数 iflM —样。但边问的方式則不像数组，我 
们通常使用一种特殊运算符防问对象的方法与特性——点号运算符 
dol operator ) a 





Q 




Proper ty/Misr. h od 


轉 作 或方 4 枚 
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点4运算符在对象和厲于对象的特性或//法间逑立起引用 D 也点像每 
个人 的名字 代在自我个体， 但的:氏则 代表他们所杈的家族 a 对象也能 
类比 • 一特 fh 名称告诉我们特枓本身,间时对_名称告诉我们特性 
所域的对象 t 点号运算符_用子结合两若 P 

现 在即可 使用特性与点号运算符汇格 lav ^ Stzript 邀请函 对象里 的数据 

r* 



iiwication.what = "A puK^le partyL "； 
invitation= "October 24t^i "； 
invitation.where - "2112 con found Street "； 

V 魚爭这 3? 搿用子汰闷 

诮大家记得，既然数据和行为都是相同对象的 ■，部 分，想 U : 方法使用 
数据，你不需要传入 afnf 东西，这点使浔邀请函对象吋以轻松采取行 
动 4 


点吾运 S 符引用采 
t 对象的特性或方 


法 


o 


invitation, del iverO ； 





a 名样 



派对遨请函里还少了一个 ftSVP 特性，它让受邀 A 士能够答 S 是否参加派对„请为 
Puzzler Ruby 女士增加^ svp 特性至邀请函（她准备参加派对 ） t 然后调用 sendRSVP U 方 
法以送出她的响应 - 
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知无不言 h 言无不尽 


職 


派对邀请函圼还少了一个 R 5 VP 特性.它让受遒人土能够答覆是否参加 派对， 请为 
Punier ftuby 女士墙加 rsvEii 特牲至 邀诮凾 { 她准备参加派 对}, 然后调用 sendRSVP n 方 
法以送出她的响应。 


EiftVEtati & n . rsvp f " attending ■: 

■ 1! - 1 p •i - *s r i r -r - i - s - t t r - r - p a p r r - r i 

Ewvitation s « hdRSVFa ； 


点孑 i i ? 得？ I 弟遼#芯吋疾 
的 Hii 龟方注 。 



，立个作也芍以袅个炎吱的輛付 . 以 we * 斤杳龙 
人彥务夸加.其巧 ■ ®" J 基不社年加 



设有«尚赵 


^ : 对象究竟是什么？它有数据类 
型 ( datatype ) 吗? 

^ ： 是的 t 对象有数据姜髢。对 
象是一组有名称的持拽与方法的集 
合。 或者这么说吧 T 时象就是一种 
数据类型。你遇过的其他类货包 
括： num ： bcT , text T boolean-"』" 
统称为基本数据类型 (primitive 
data type ), 因为它们只表示一块 
fj 4 对象则被称为 complex &姐 
类髢，因为其中也含多炔数据 £ ■你 
可以把 '时象 51 当成第四神数据矣 
^ ,写在你已级学过吋基本技据类 
少 （ number 、 mt , boolean ) 的后 
面 t 所以说 ，忭 创建的仔何叶象， 
或被饴使用的任卜 navaSciript 内£ 
对豕 t 它们的技据类型部是对象 ■* 

问：我不能只用全局变虽加上函 
数，不去管对象特性与方法吗"函 
数也能访问全局变不是吗？ 

答： 你讲的是没错啦……网超是, 
全局交量也没办法阻梏~己被其他 
代码访阿。这点的问题在于，我们 


都试者眼制数据曝露的荇度 T 只让 
真正有需务的代码接触数据> 如此 
有助于過色欸裎不小心被其他代鸪 

很可惜地 ， JavaScript S 前无法真 
正避免时象 特性被 外来代码访网， 
而且有些状况 T . 你会特别希殳对 
象特 _ f 生能被直接访问„不过 > 大现 
念就是把敖据放入对象后 s It 据在 
il 轱上即与对象相关联 fl 与对象紧 
宏联系的数据，比起在脚本中仪零 
的一般数据（全局变量）*具有更 
多背景与意义 H 

S°i :我已经看过好几次这种 “对象 
加上点号运算符 。 的注记方式。我 
真的_直都在使用对象吗？ 

等: 没错， 而丘你还会发现只用 
JavaScript 却不用对象，是忤非 
常珥 单的罗 T 因■为 JavaScript 本 
身就是个大也的吋象集合，举 
例来浞、 alertU 為軚技木上 
其实是 window 对象的方法，它 
轮以 window.alertU 成消硐 B 


window 对氧代表浏此器窗口，识 
不需刻 t 指出它是个对象，所以诈 
才能只用 alerts 

:好了，你又把我弄糊涂了 D 这 
是说函数就是方法吗？ 

对.不过如此看待函数的确是 
根困扰各位乙经知道通数是一 a 
有名称的代码，其他代码能用而數 
的名称调用函饫。方法其实 a 是放 
在对象更的函敫„使人困惑之处在 
于每今函数其实都4于某个吋象。 

所以说， aler t { ) t 是函数也是方 
法，因此它能被当成禹軚或方法而 
被调用一■大 f 軚方法被调用时必 
颅当成方法，需加上对象泛记（点 
兮） n 悻在 根多惰况下， alert () 
隶属于浏览器的 window 对象：既 
然在调用方法时 window 对象是没 
有指定对象时的双认对象（如调用 
alert() 时），遂 T 以把这类方法 
视为過 It a window 对象只 是偶然 
拥有这痊方法，方法与时象间斧无 
迻桃上的联系 a 
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复习要点 

■ 对韌迖种特殊的数据结构.结合 f 钕据~依据数据 
行动的程序代码。 

■ 火阮〗：，封象 R 足结 Or 成单一结构体的立以和喊 
数 □ 



9 当变；£被放在对紮哏时， 它称力 特性》当兩数被放 
在对象 m 时， 它称为方法 《■ 

_ 引川特性和方法时需捉供对塞的各称， 后随 点号运 
详杵_洱掊上特忏或方沾的名称 3 


魔方的博窖 

Ruby 收到解谜大会的邀访兩，她敁爱玩斑方' 等+ 坆想和 K : 他热 
爱解谜 的朋友 一起聚会。 Oi Ruby 规在还冇比参加派对史重视的亊 
情——地恕逑—个溥客，与外界共#对跤方的热爱*她 ti 经准备 
在 YouCube 上分萝三维 Ift 界的智泡 U 




泯崤 iS , 对免枓注我的代锡较 容恩绝 
达样我弒有 i 多对闲究廬方 J , 


Ruby 听说 JavaScript 支持自定义对象，用于创途更可耜,最终更 
可维 护的代砰。她也听过 m 多博 . t {渐渐疏 r 更新，所以他们的陴 
为经#也 H : 趋停滞 n 因此， Ruby 想把 陴其 违筑在疋确的揉础卜- 
-—她要采用面向对象 ( object - oriented ) 的脚本,便用自定义对 
象迎 M 充满谜闭的未來。 


面向对象的 
You Cube 


更多研究魔方 
的时间 
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与廑方合一 


蘚构 YouCube 

馳醜过种 財， __顿油如期与文 
ft ， f 舰 iavaSc 咖雜 这 ㈣ 乳忍 m My 不 


孕写故 YauCuii 



Rut ^ 迫切湓要在掊存储与访问多组 “ n 朋加文字” 数椐的方式。听 
起来 與像 h Va & r 中对象的功能……结合多段佶总， mtm-^ n 


博客曰期+博客正文=博客对象 


一个 H ) 定义对象，玎 
it 两块馎窖数梅结含 
为单—实体。 


400 第9萑 



为数据带来生命 


I )定义对象扩展？ JavaScript 



"Got th « new 
« kri >» I 

it 1 « * r«»i pviiiii 

隱灑 J 


JavaScript 语言 包含许 多便利的标准对象,本章梢后将讨论数个此 
类对象，虽然 fc 准对象便利奸用， m 柯呰时候，"“准”还是不够。 
YouCube 博客叩可看出这奥限制 ，因为 它牵涉到的数据存储问I无 
嫌用 JavaScript f^ l 敎据类型解决……此时适用肖定义对象 a 


梓 :(! JavflStTtiPt 

的章 .. 


A 的. 竽与華忠的古 


肖定义对象增加 TJavaScript 的功能 s 以适应我们的持殊忠求， U^by 
的例子而自定夂对象町形成博客 n 志，使用特性 ( property ) 以及 
达博客 P 期与 IJ 忐正文。另外 t 方法 ( method ) _可增加博客 U 志的 
行沁，让博客的违立与管理吏迕观。 


嘩吝0烟 




^ ^象是# •£ 合靼馮 
炎螌—— ' 叇合并块菽凋 


Blog 


辛 4 YouCuije ig 
4的 t 耷义巧 fe .， 


沒节的栗的锌长 ■ 

r ± 10 feifif 玢龟也 
4个 A 择。 


Array 


教迟也基时 




为了带來自定义 对象的 生命，我们必领先知過如何肉定义对象…… 
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构造你的定义对象 

既然对象具有相艾的数据 T 数据便忠在对象创迚时初始 化， 此时耑要 

特殊的力—法- 构造函数 ( constructor ) t 来为对象准备运行 fl 毎个 

E 1 定义对象都忠 要卩 - f 己的构造闲数，其名你与对象相创达对象时， 
忠调用构造函数以初始化对象。在创逵内定义对象时，设计合适的 ■„ 


构造&数员贵 
劍建对象。 

m. 


凡对象带來生命的构造螭数，就是你的工作 



淖备锖用射釦 4 的 


数，/卩以对象创建的过程。创让对象的构造由数， r \^ mmmjju ^ 


因为淇实就是如此 3 然而， 1 定耍他用 new 运算符 起始 对象的创违, 


rfii ⑴仅仅克掊调用对染的枸造闲数。 


迂茸為鬼彳釗 St 射 



var 


i nv i I.. yi. 1 on = new 工 nvitat ionf""Somobody ■ P r, 9omething n f 

t 新的 象冉噠 4 4 対％迮遂教的邐浓萁懞 

蓍 f , H 古； i B 


*Somet ime' 1 , ,! Somewhere' 1 ) j 
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矣雄子 cAij S 分 a 寸 

象的辑 ■^鸟 一 投 

51. 


构造蚤数里布什么？ 

构造函数的大部分丄作，就是创途对染的特性，坯有对象的初 始值， 
在构 造函钕 里创建特性时 t 你需要使 ffl JavaScript 的关键字 this fl 
this 指派对象特性的所冇权，同时设 W 特性的初始这个关键字的 
功用4它的字面葸义相同——创洼禺十 11 这个 h ( ihis ) 对象的特性, 
而不 H 是构造函数嗽的局部变畋 6 


\ 垮违矗赵栌硪礅古式故 

(i^ii 两 ft 油忐 

兵鍵字 thU 是子构造 

时象恃忭的创违 4 初始化忠使用对象注记（点兮运算符）和乂铤 &数里釗建对象特性 
^ chis. 没有 this T 构造函数不会知道你正在创建对象特性 n 上例 的重点 
构造涵数的结果创七了 4 令恃忭，每个特性分别被指派 T 怍为 G 变 S 
代人构造敁数的 4 个值 



¥时 

f% 

較. 

违士.* 
构章象 
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活动吧!对象! 




笔上阵 

AnAfr 为 对象设 计构造函数，其中为博客日志的曰期和: IE 文创建特 

_/ f g | i C | io n pijjqibgdY , datcK 

的；枒每 .. ... . . G ' m 私找-以 ti 变 I 

吋赛扣苒。 ibis.body p body ; ^ - 一衿式详入均數,. 

........ B . 9.. r ---i-er^pi>i-i-f^r^i!iFirii!iriB'ieif-rii-irii!iaiBriria[it.iaiBiaiai.dB.iBiiiidi.di.diij&.iB.i.idb..a.T. 


this.date ^ dat«; 



兵健穹 tfcis 用子 



璉苽 笮渣 在盘的 tl 
凝匆 d 的初姑化。 


为博窖对象帶來生命 


Blog 对象渐渐有模有样了,但它尚未 J ^ K 地建立 B 理论看起来再美 





女 h 也只是％待证明的假设， mtfLtH , 构造病数 M 然确立了对象的设 
计， lH /义: 际上并未创迮任何_样物，直到使 WUew 运算符调 m 构造函 
数，才创述了对象 ■: 所以我们继续 K — 步，创边活疢的 Blogr 对象„ 


关汐 本贵的 适叫. Ff Jy [ # // wmjju 

headiitsilaAs . £om/6tnrka / 咖 / 下戴 


OS / I 4/2 GO &^; 


成用 & b 9 〔） 构遭 
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:对象的创逢搞得我一个头两个 
九 究竟是用运算符创建对象, 
还是用构造函数创建对象 

答 ' 都是彳 new 运算符 I t 设定 
对象的釗建，它的工作主要在于确 
定调用了构遑而抚。仅像调硐滅彀 
般闲用构造 A 故，而未使用 II ew 运 
算符、升不会创这吋象；只使用 
new 运算符，而沒有构遑必抚 ，也 
T 会有任何意 iU 

:每个自定义对象都需要构造函 
数吗？ 

答1 是的。 因为构造毐敦 3 T 责创 
建吋象的特 _ f± t 所以没有构 il 亟 
就没有任何特技。没有佐何特性 T 
也就不是个有意义的 对象。 


乜构迭必数的规則有哨例外——创 
違单 H 的 nrgani ^- aHora ! object ■时 
{这类对孓由一组方法集合组成，但 
这些方法不会浓据对象的特性行 
动）《此时，技术上 T 以省咯构造 
過数，忸也请你记得，这姜吋象并 
非面向对象瑞枝实践的绝注苞 ff_J . 
它只是许 多相关 毐数的集合而己， 
尽者如此1 hvaSL - ript 仍然提洪了 
这类对象，用亍收4敖学的相关任 
务，本章稍后将会提到 . 

1^1 : thk 究東是什么。 

^ ： th.i s 是个 ■ JavaScript 的关键 
字，叫于劄琍对象，说得史详紐 
点. this 从对象内部 41 用同一个 
对象。我知道< 听起来很诡异、而 
1 有 A 精坤分裂：.不过 K 要好好 


屹换个南度想清楚 h —圬仗合理 
了。以现实生活举洌，如果你丢了 
手表，但有人在挤满了人的屋子的 
某个地方找到了你的手表，当高 
举手表时*你很可能会大叫：“那 
是我的手表！ 71 对吧丨你用 T 代名 
甸“我的"，以自我 U 用 u 更重要 
的是，“我的”还用于蛩冼你是手 
表的主人 3 this 的运作方式也柄 
㈣ 一它指出对象的所有权 4 所 
以. Lhis . da . f_e 表示 date 特属于 
代码士现处的对象， 



创建揉于对象的数组< 名称力以 youCube 博客日志 
数据做初始化。在海则记录的正文部分，只填人运薊面的几个字 
息思-下就可以了 E 


0 I /21/20 M 

Fftimd » 7x7x7 eub? whtit. Vik*^ 
That om eould b * a beast . 
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還笔上阵解答 


'C 


01/14/200* 

frot the htw cMbe 1 flrtterc ^. It " i a n *1 P* ar ^ j 
dlA 9/2001 

Solved tht new tube but of eounie』now 1. * 
bured wd thffppN fora mtw ^ 

0I/1&/200I 

to a h ** da&he 叫打作 6 

new cube, 
hmnap . 

OI/21/20W 

FmindJ Jtltl tube for »le owltne. Vftctil fhflf 
one touid be a beail 


创建風子£5109对象的数组，名称为 b ] t > q , 以 youCubeM 客曰志 
数据做初始化*在每则记录的正文部分，只填 入最❼ 面的几个宇 
奪思_下就可以了， 
va r t>l og = 

Hew &!o^( n (rcit the Hew ovb« I ordered,,' "0S/14/200SI 


new 於 loqdolved the new cube but of course . 


new ^ lo ^ rMana^d to a headache 切 illng 


'0(/19/20011 


: _0S/16/2D0«l 


枯挪 EloqrFoLrud a 7n7x7 cube hr sale..: n DI/21/200! n J 


s —则 c 恚*攻釗速 
4 出。 s % , 奇 ts 的 P 
去芑玄島0钠。 


YouCube LO 


々守乜®个 0 to j 4 象的 
C 朗， ft ? t 亦砧 1 现存 



Lt 我们瞧 F 为 Blog 对象带来生命 .1± YouCube 1.0 美梦 
成真的代码…… 
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放大 YouCube 



< hLml > 

<headi> 

it loVouCL-bfi 


The B 1 09 for Cube Puzzl-Gr&c/t i 1 1 .e> 


<script type= B texli/jawascript"> 
N Blog object cons^Lructor 
funcEii.on alot^<body, datef [ 

N Assign Llie proper-, ies^ 
this.body = body ； 

Lh.i 9 .date = date; 

] 


Bk〆 } 粑產总盘奶違 



时•的 



遇发 "Global array of blog entries 
^ fi t(t) <j iV 3^ var blog 二 [new Blog( n Got the new cube I ordered.. 

黃 T, 


"0 B /14/2 Q 0 a ->, 

new "Solved L he new oube but of course.,, \ [l 0 a/ 19 / 20 GB") r 



new Elo<^( "Mrimoqed to get a headache toi ling. 
new Bloa( "F'ound ^ 7 x 7^7 Cube for sale online..,". 


Da / 16 / 200 E n ) r 
- 03 / 21 / 2003 '-)]； 


// the list ol b]og entries 

f u i on showRloa(numRrii. r i-es)( 

/ Aajust C-he rtumber or eni. rlea Lo show t he full talog r if necessary 
if (inutnEntries) 

fiumErlL t ies = blOy, length; 


如莱兵表以 t 霞量 1 入颅条置现的 


// Show the blog entries 
var i = 0 X blogText - ’"■; 

while (i <• blog.length fic& i < nuirjEntries) t 

// Use a gray background for every other blag entry 
if {i % 2 0 ) 

blogText += _<p sty 1 e="background color ： #EEEEEE J > p ; 

^ —^— ^ -系硇悚害 e ? 4 的斧睪 賴浥 1 4 闳读沭始泛奶兎. ， 


blogText 


'<p> ir r 


// Generate the fornatted blog HTML code 

blogText- += w <strong> M t blog ji] -date + H </strongxbr /> m + blog[i] .body + M </p > m ； 


1 + - 


} 




// Set the blog HTML code on the page 
docyment .get Element By Id ("blog !, ). inner HTML = blogText j 


_ 先 专 
患立 丈的格 武 a 


设亥0 


</script> 

</ head> 

<body onload-■showBlog{S}；"> 

<h 3 .>YouCube - The Blog for Cube Puzzlers</h 3 > 

<img src= H cube. png ,! a It 一 w YoyCube® 

<div id- H blog H x/div> - 

^ input type- "button" id-^shawal l - valu.e= n Sbow All Blog Entries 
</body> 

相 T # 往 ㈣ F 朽出辦有博 
本 E ? 志 


■> 


ilv ^ &切的空 W 只 

奇格武的文丰 1 tA :舞 * 


onclick= - showBlogO ; H /> 
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为什么.为什么，为什么! 


' 3 ^ 

产沒有蠢酿 


问： 为什么 YouCube 索要一 
个 41 Show All Blog Entries " 按钮? 

答： 以博客 U 前的状厶而言 ， 的 
碲不需要这个桉钮，毕竟，总日志 
数只有四篇巳，但随着博哀的成长， 
限制 YouCube 主饵上 出現的邗设 H 
志数量，将变得越来越重要，以免 
磨掉呵户哥待的耐心或仨息接 收童： 
所以馎客代碼璽欢次为只列出5篇 Q 
志。 , L J > h{Tw Alt U Jog l £ nlrtes r， 

钮 1 T 改写默认值， f 1 ] 出所有0志， 


闲:为什么使用 innerKTML 呈现 

博客日志，而不用 DOM 方法？ 

^ : 虽然 DOM 方法绝对是考虑万 
维网标; f 时的皎诖选梓 T 但讲到动 
态产生樁式+富的 HTML 代码 ，它 
实厶有点笨重，玛为吾个容器标签 T 
例如<厂 、与 <at r , ong > 1 , 必飾被4 1 」建. 
为父节点，以乜含作为内容的子节 
A a 在这种状况下 ， 'n n e rFl I'M I . 
实在方便太多了，而且也能同化 
YouCube 的乜序代码， 


^为什么 Blag 对象没有任何方 
法？ 

| i 你很野心勑勃唧 . 不错 f 

事实上 t YrttiCube 还有很 f 地方需 
要处理，然后才轮釗 Biog 对象的 
方法。但是，則惊 慌， 吋象方法 
肯定是 “ uCuh {:远景 说划 的一部 
分。 “方法 3 是(尤良对象设计的重 
要部分， Blog 也不会是个例卟。 


失序的博窖 

YouCube Lt > 葙起来不错，不过连是有些 缺点- Ruby 也葸到博客日志 
的_序不对——应该把 最新的 U 期排 在最前 跖才衬 。肖前的呈现版 


馎客! 3 志应该把 
最新的 0 志排在 



戏 w 滅现我笃齣 e ? 基不 ja 捋 
体 fig E ? 萠戚坏排列 
这违个问崗！ 


in n 










序就足 H 志存储的顺卬，而存储顺序不足令沿捋依赖其编年的顺序, 


最前® 


角户职柃恭 ■£； ® 
的惮吝£?态甚； 


tn 4/2 im 

CiMtKOurv^bei wd L u. 此 ■货 如 

阳他 _ 此卿咖 _ uf 咖史擊細 fQr ( 

»1^30 US 

M 地抑 to^ a ^^^^ Cl0ta 

^laom 

Wl B?og EniriesJ 


Dc，e 
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排序 的熏求 



Ruby mm . 可依 R 期排列博客的数组願序,以解决排序 的问题 ，既 


知道如何比期眺序的话„ 


迖译 Me ? 志嗜璆 匆这 
© 老第二尊约 g 明比 


博客排序的解决方法听起来 m 聪明,而 [ l 好像可行……假如我 fne 经 


m JavaScript 支持循环与比较运算 T 应该可用循环处理博客数组, 
比较毎喇 U 志的曰期，然后依反向的編年喁序排列(先列出蚯新的 


n 忐} 


以掘坏处理 M 


泛笄怵 f G 忘应 M 驀 
光 si 规.碎卷右矜 C 

斯&驴 3 V 


比较铋个 Blog 对象与 卜个对 

如采 F 个对象比当鲋对象的 U 期更新.则交 
换 JUm 


客 n 志。 



存储为字符串的日期并非真正的曰期。 

Ruby 的博客排卬策略遇到 了非常 严垔的意外障碍， M 为存储为卞符 
_的「 1 期件不具有时间的观念。换句话说,只是比较字符串 T 8 / 14/2 
008 __与__ 0 &八 9 / 200 『，我们无法得韧何者的日期比较新，因为它_ 
坫卞符串， m 然字符巾纣作比 it m 字符串比较运兑并不 f 斛 tl 期的 
浊特格式， 3 然也尤法比较 II 則中的年等部分- 

所以，在攻们 A 真考虑以 ej 期排列博客 n 志的顧序前.首先需 要重新 
恐客屮#储 H 期的方 
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Ryby 耑耍一种能鸲比较 U 期的存砧方人。换句话设，11期忠要了 
解 fj 己是 U 期，行为也 要依据 F 1 期而行动„等…下，听起來怎么 
像个对象!事实 h T JavaScript 确实提供内置的 Date 对象，非常适 
it Kuby 的溫 求， 

Date _ 


沒耷 o 朗赵轉的 


Date 对象可表达时间中特定的_幻、敢小龟位叶达毫秒, rfrUL 它 
足 luv.Scripl 的 fe 准配衍，不过 Date 的内部儿宪用到/特性， M 是 
对象的用户看不到特忡。我们纯粹透过 Date 的方法而运用这个对象。 


L u Blog 对染相似 t Date 对象甫以 ⑽ m h 算符创迮。|、-例创边一个 
友示 H 前时间的 Date 对象 f 


的 DftEfi 的象 * 


b 例创建 Date 对象并初始化为目前的时间。请注意创建 Da te 对象的 
语法 mm 对确数或方法的调用——用 e 对象 
的 构造碘 数。如采丟-段宇符串] L | fS : 给 Dace ㈠ 的构造读数，即可 
指定 Ff 期，如 F 例的 Date 对象即代表第-篇 YouCube 博客□志的 iJ 

m ： 


var blogDate 


new Datet m QB / 14/2008 n ); 
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i 十翼时间 

村象最强人的 -- 项功能，就是它们天屯知道自我操纵的方式,以计择 
两个日期间差趿的天数为例，用我们 的人帖 计算天数实在不太容昆, 
你必须参芩莱个时间点，把某令3期转换为大数 T 再确定考虑了闰 
年的因索，或者，把这项工作交给 Date 对象代劳吧……诘看利用几 
个 Date 对象完成这项繁重 I 作的函数范例 ： 



vac daySBetween : (date2 


datelj 


/ aooo * BO 


60 


24); 


A 


■# 




闭辈 fE 随力十足这 
犹基这 瘕天盎 OS 的 


上例函数里的一段简单代码——减法， M 现 fDate 对象的威力。所 
有牵涉到 VI 算 U 期差异的复杂过程，都被轻巧地隐藏在 Date 对象深 
处。我们只需要注念滅法的结果，它以 M 亳秒”表示两个日期间的差 
距„所以需要把奄秒数转换为天数，做一下四舍江人，然后我们就有 


一个可以茧复使用的便利小下.戽，每次筘贾知遵两个3期的左距时即 


可拿出来利用。 
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习题解答 



请为前两则 YouCube 博容 S 志创建 Date 对象 e 然后调用 getDdysBetween () 函 
数，传入刚创建的•两个 Date 对象.并以 dert 框呈现运萁结果. 


的苒的博害 d 的 S 
期金) jJOme 的象= 

VAt bb^Pafd ^ nev^ I?afer0i/14/200i1; 

■ il_ I. ■ <■ ■ ■ ■ I ■ ■ ■ ■!■■.■ ■ .1 G 4 ■ il li J i. ■ ■ ■ li ■ fa i ii L d J d I. a b _ I. J B _ m. m m m m ^ m J m 

var bb^Pate2 * mw Patd u 0 1/\ 9/200H ： 

iilBJB IBla I* I. J b ■ I. d LJi ■鼷 fa d ■■ J b vl B .1 B ■ k I m ■ _ ■ d >. d I. d h_hd > J > d ii J fa ^ • 




alert(Th(! 叫 &f 3 r« separateil hy u + geiFaysPetweeh(bl»flPatcl bfogPafe2_l + 




把茶 个 Date 的 象士咸 


daysD ： 



重新恶考馎窖的 19 期 

ff r JavaScript 提供的 date 对象，终干可以聪明地操纵 U 期, 
讯 YauCube 的 Blog 对象 B |犯仍然把 tl 期存储为字符串，而不是 
Date 对象。为了利用 Date 对象的各种功能，我们需耍改变博宮的 H 



朋，让它们成为 Date 对象„ 
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对象里的对象 


Blog 对象是个 " 对象常常包含 ( contain ) 其他对 gT 的好例 
"Fo Blog 对象的两个特性实阮卜_本旮已经总对象一都是 string ： 对 
I String 对象宥起来不太像对象，它们只間单地括起一段文本字 
符串 + 创违为对象字面量 (object literal ) p 但 Date 对象就没这么吴 
活了，必须使用 new 运算符创建 Date 对象。 

为了把博客的 date 恃性创建成 Date 对染 s 我们在创建封象时 . 
必项使用 new 运算符创迚新的 Date 对象。听起来很可怕吗？或许良抟 
看范例代抖有助干抒缓恐惧 . 




掌符瘳掌麥 f t 劫釗 
iStutrs ^ t , 


4角时》运龙苻划 




var blogEntry = new Blog( "Nothing going on but th& weather, n , 


new Dat6(^10/31/2008*)1? 


划違 ] Date 吋象冉作入 均送 
函數. 簡择 璉角 这 S 功。 


现在的 YouCube 博客志，垃令包含两种 K 他对象（一个 String 与 
一个 Date 对象）的对 象， 3然，我们仍然需耍创违 Blog 对象的数组 f 
才能成功地表沿所冇 YouCube 博客的11志， 



mwis 髯符在 构捸 
&数 的协助 T 釗 
建对象 。 


、摩笔上阵 



毛新设计创 JiYoi ^ ubfi 的 Blog 对象的数组的代码，把0期政为 
Liane 对歙 B 不把曰志正文全都抄上来也没关系。 
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磨笔上阵解甚 


^ 4 ! 


笔囁 


垔新设计创建 VouCube 的 Blog 对象的数钽的代码，把日期改 
为 Date 对象 a 不把日志正文全都抄上来也没关系。 


1 


運蛑 Stas H 象 . 

mm, ijLoft J .I &I 叫 doi 1 . h 极 jaubfi Urdfr^d.J ； .k^w.Raffit'Oil/I i/ZQ0T)l , 

, »cw ^pqt；Sqlycrf fhejiew cyh? bMt.P.tO,. 




new Plod Managed to get a headache to Hi Kg..' new Pate TO S/16/200 TJI, 

■ leiainrii i"T iripipiaia ■ _■ r '■ e i d ■ ■■ ■ r i ■韉 ■■ i ■ « k i ■ ■ 鬱 ■ ■ ■■ ■■繾 r d r aB^BiniBiaiBiatijnriBiBiaiBiiiiiiiii, iiija «" a 

new a. 7m7t7 cube fur sale 『二 mv/ Patel"0l!/2I/200S i ')l ]; 


5 个 0 ( 4 圬卑的 s 期伶釗速 
爸 D*tfi 0 聿 


竦害 E ) 志的 it 亡 



^雜 


^及有 a 闷尨 


： 为什么 Date 对象的 B 期单位为毫秒？ 

^ 耆先，请了辟 Dste 对象在于表达间" 4 如 
果宇宙有个暫停按钮，我们就可以得到时问长河争冻 
結的鱗间，但还需要一个参考点，才能表达这个瞬 
间„所以有人揸台决定1970年1月 I 日就是参考点, 
接下来需要测量从参考点到冻结蜱阗的滴移量。或许 
是30年又《个月又丨4天又3小时又29分又11秒 
……这种表示时间偏移的方式也太累货了吧！不如只采 
用单一測 f 单位，以能够表示最小岣时间片段为原則。 


那託使用€秒吧？所以我们不会看到那么5时问单位, 
而是得出 1,218,702.551,000 没锫，使用毫秒的 

决定軋是这么任性，反正 JavaSeripl 并不在意处理丸 
致字 。 

:使用 Date 对 象时， 我需要担心塞秒转换的问题 

m 

答: 看情也 . Date 对象有几个提取部分3期单位的 
方法，以免直接处理毫秒數 & 不过，如果你需要处理 
两个日期的差尨，太 k 就躲不开免秒的使了 __ 


复习要点 — - 

■ 枯准的 J ava.Script Date 对象，以在秒表瞬间 D 
■ Date 对象 R 有一些仿问各部分时向讷的方法， 


Date 对象聪明到能够对口期做四则运苡，还有比 

较曰期. 

与大部分对象相_ (String 对象除外 ■) , Date 对 
象需以 new 运羿符创建。 
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0 期浚有用……对人类 ffi 言 


把 Blog 对象的 date 特忡转换为 DaLe 对象后 t Ruby 准备把注意力 
转阿 两容 B 志的悱序 6 好吧.几乎准崙好了 。 她现在好像为博客的 y 
期带来新的问题，新的 U 期格忒很堆 ii n Ruby 在想 t 坩户应该不会 
艾心 每则 R 忐在哪个 B . M 发表吧…“ * 这类信息只金干扰 YouCubc 的使 

川体骑 D 以然，引人 Date 对象至 YtmCube 后， 迅有一 些笛要仔细检悚客£?明史扎 ■ fit , 



# ft 0 - Th* 9 ofl_[0fCu b« Pw^tn 

YouCube - The Blu^for Cube Punkrs 


Thu Ami 14 um 00:OW» GMT-WWO (CUT) 

Gritlic nc* euteel c^rod. iTs 4 ical pcwl, 

Tu# Aih !«» OCfcOfl^W GMT-OS00 (CDTl 

Solved Uk dcw cube bul of^ounc. now Tra t>i«d arid slwippuiB lor 

1A ixm 00^0^0 GMT^OSOO (CI>TJ 
lK>gcti uDing o^TTbe new cvbt. 

Thu Au£ 21 2WS GOiOO;W CMT-OSUW ^CDTl 

a 7 ?i7k7 l'uIic for Me online- YDccM "ItHLi one o^ukJ be w baiM 

Show All B tog EniriM 

fkirK 


U IMTVM UIK 


Gotta Mp. 


不只 G 朗 4 起皋一 
® 棟客 记录的 
典糾嘹 4 <fe 不 时 
'■- … H 没 i- 


Ruby 对子 YcmCube 谜样的 Ei 期信总感到人惑不解.她根本不 
记得 3 过任何呈视 R 期的代码 & 她明明只把卜〗期卞符串鉍换 
成 Date 对象而 已，难道她的 H 期受到什么邪恶的 JavaScript 妖 
力诅咒叫？ 
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一定有更好的方式 


对象转猱成丈本 

幸好，并非什么莫.名的邪恶力 a 造成难看的 Yoiiciibe n _ n 亊实上， 
-切籴白 JavaScript 口期对象的本性—— F 1 期自己为自 d 加上格式！ 
运怍方式如下 I 每个 JavaScript 对象都具有 toString ()// 法，它试图 
为对象提供文本字符串版的表达方谜般的□期就是 Date 对象的 
畎认 toString () 方法的输出结果 B 



var bl 09 Dat e 


new Date( H 08 / 14 / 2(3081 




toString () 方法的棘手之处在 + 它会主动冒出来 T _ 作。若对象的运 
作 >. 下文期待字符串的出现， taStringO 方法即自动为对象 加上格 
式，例如把博客 R 期的 alert 代码改写后，它的输出结東逐是完全-样: 


toSftinjO is (去也 
戏矛 1 Datf 对系 
iS 轱吋何栌方式。 


toSlr _ UA 法筏供 
对象的字符串表现 
方式。 


因函数预期收到字符串， rMDate 对象也很聪明，知道它必须提 
供自身的字符串表现方忒，所以它頃用 toStringO 方法以处理这项 

t oS c ring U 的业务平常不是问题，除非遇到 B 期需呈视得简申-易读 
的状况，就像 YouCube 的需求（如采取 MM 7 DFVYYYY 格式），总而 
言之. YmjCube 无法受惠于 Date 对象畎认的字符串表现方式（由它 
的 toString 负责）》 
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e 躬中的刀汾 fe . M 
老章0利 u n 


Date 对象丰实 h 不只支持这三个方法 T 它提供汗 L 午多 
多访 Hfi 期与时刻的方甙。不过.上述气个方 法已可 
塑造 YouCube 理想巾的口期格式 - 


L / ^ getMonthO 方法.返的的月份 

逢雪『数，从0 卜； n 开始，到 
1 ] (十二月）为止+但 gerr > ate () 方法迈 
田的天数却是从1則 3 U 




谙修正 君不懂 VouCube 博客曰期的问题，我们芾要氐写自定义博客曰志 
格式的代码，并把它存储在 biogText 变靈 IL 请确认 博客日期的格式为 
MM/ CjD /VVW, 下面列出原姶版本： 


<strong> n + blog[i]-date + 


</strongxbr !> 


H 
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磨笔上阵解答 



笔上阵 
k 解答 


请修 IE 者不 1® YojCube ㈣ 客 B 期的问题.我们 黑要車 写自定义博客0 
志格式的代码，并把它存储在 blogText 变眚里 u 请确认博客日期的格 
式为 MM/Dtvyyvy。 下面列出原始 版本： 


bkaf^xt +* + CbEdgtildsite . QetMQinthE ) + t ? 

b!c^[a 如打 PMeO + _厂 * 

blfldltl.dafe.^tFvlIVkdirf] + fr <^tre>hQ><br / > H * 

f s I i r •! it 'I ■ I ■ ■' b r i r -i h - ! arar > ir ， ii i i^i9i^i i !i niararirfia i ■ i< ■ rial ■■■■■■ ■ i<_hj ■ m 

Mo^lll.body *■ n </p>": 


蚊 if- 路式 , 

t 拉权. 


Pate 把棑序 交简簞 

博客 U 期既 ti 成功转换为 Date 对象（比卞符串更适合的存储方式 .） ， 

也该回头查竹排序的 Um , tT 客「】志以#储全 tolog 数组时 
的顺序排列，但存储嗰序不见得是 U 則舳仔。另外，大多数博客采 
用先列出最新文帝的{■逆向编年） Jii；r. 既然如此，极好逆铐股本 
的博客悱序 策略； 

o 以循坏处理闲客0志心 ^~~-— 

© 比较毎个 Blog 对象对象1的 Date 对象 。 

© 如果 F 个封象的 n 瑚比现在的 n 志新，則交换其賑序 D 

迫然加人 Wte 对象的办助后， U 期的比较似乎设那么吓人 J \ 似具:他 
策略计划述跬盍耍相当大染的白定义纯码 n 排列 t 〗 期顺序 T 听起柬是 
个相 3 常见的桎序设计 W 题，一定冇很多人解决过这个问题 D 我+恕 
重蹈前人的覆 辙.“ 
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在已身中排序 


视数组为对象 



数组能否 G 我排序？如果期知逍如何把 0 d 变成字符串，希 
望“数 m 也能自我排序”或许就没那 么好想 天开 t 。 不过 h 想耍荚 
梦成真，数组必须适个对染 t 才能在方法 （ methwi ) 中排序。事情 
汜娃如 此，迚记得 Mandango 的这段代码吗？ 


for (var i = 0? 


length; U+) 


r 

企雀 S * atf 泉个&姐 i 


知盘 iB 5的义希教罾 = 


好了，秘密祸晓了.数 m 是对象> 可是这样就表示数组可 tum 我排序 
吗？数组不只拥有 length 特性，还有其他根据数组数据而行动 i 为数 
据带来生命的方法 ( method ). 而 R , 有个方法就叫 sort (>, 可为数组 
中_的数据排列躺序。我们一起##它的运作方式： 


nums 



一 个教章 數姐。 

var nums - 


[ Sl t 11, 14, 29 1 17 r 46, 22, 59, 16 j? 



nuinE,sort ()； 



体碑冪 .味 4 拟刊 




30^()方法改变了数组11的元忐顺序。默认采取由小排到大的升祗晒 
)¥. 所以 nunis 数组变成 F 图所示 i 
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I )定义数姐排序方式 

只犇 Array 对象的 soru) 力-法的畎认行为 M 常不够。还好，排序行为 
可由比较函数 (comparison function) 决定 D sortU 谓用比较函数 T 
用7-比较数组中各个等若悱序的元柰。由 Li 提供比较涵数，即可调销 
排序方甙。下例是比较兩数的常见形态 t 

个印鴻！乘作比 

I K 私4的尨这允承。 

return x - y; 

\ 达史体决宠、 3 技孟镍确琢 

V 滅 J 启料 4 子 I 亡树 fl 


function comparefKj y) 




y 排序千) t 前。 



调用 SQftn 方法时 t 把你自定义的 ccimpai : e (} 甬数注射到数组徘序 
等式里--只需把 corr ^ areU 函数的引用传给方法。 


软驵坍存珙旮嘭 t 鬼义 
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茧笔上阵解萏 


设 M 自定义比较 S 数 『:: ompare H ,它以逆向编年哬序（羅新的 
曰期在最前面）棑列 youCubetS 客的曰志数钽提示； Blog 对 
象间可简单地以破号应用 减法。 

/ fyncfiDp cowparefbloqt falog^l { 

jf l. siij.tjfcj I ； luij l 1 a I ■ l- J hiasj - l. j l. a >. ‘Wm k .s k i, • •>-■!• J •>•>-•• r v ~ r ^ ■TB , ra , rB ra ■ n ■ i ■ ■ ■ -v ■ ■■■ej b ■ si i d i. a ■ j kjbj ■ a. a >. d > d • 

这并个 t 1 4 f 4 r«tur*i &loq2.dafa- blogl dafc； 

对豕，困巧 . .…. .. . . . . . . . .. 

蛊闼 笆食 



个 S 朗滅条 装一个 



哉旬龙 C 明丨成致竽 （ 憙粘老） 


d 答 


利闲蚤数字®量，排序耷得简单 

讲到数组排序用的比较函数，它只是供 s^rt.n 方法使用，完余不会出现在 
别的地方。既然比较函数不佘被 YouOibe 代码的 K- 他部分调用，它其实不 
盅是个有名称的函数 。 

还记得第6章提过函数 宇面* 吗? compare ㈠ 的用途使它成为函数字面 
垃的理想候补 3 南实上，苦把 c o m p a r e () 转換为函数字 面味， 直接传 
人 soirU > 方法， •步 简化 YouCube 博客的排序功能。 



传给用，蛊诏拟存 

blog.sort (£unction(blogl r blog2) { 的伽 t () 太免 

return blog 2 .date - blogl . date ; 

})? 



身为虔诚的解谜者， Ruhy 非常里视效串，此时，效中等千删除不必 
耍的函数，而这个不必要的函数只是 sort () 方法的助手 。 Rtlby 真 
的很 S 视效率，所以她不愔比较函数为什么耑要用到三行代码 。虽 
然 JavaScript 代蚂的排版方式汴不会影响程序代码的运作，但本例的 
函数字 lliH： 因为够澗单 + 把代码吐缩成一行也自有 K 道理。 


在龙言沐 入一行 
f 七踢中„ 



blog.sort ( £ unction(bldg 1 r Mog2) ( return bloq2,date - blo^l.date ； )) j 
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问：每个对象都有 toString 方法 闷： 在 Date 对象间，排序的比较 问： Array , sort () 方法该如何知 

叹？ 如何运作？ 道使用自定义比较函数或默认的比 

答：是的。就算你釗建了句定义^ :(排 序用） 比蚊函数的 I ]标 较 方式。 

吋象 T JL 并未给它 toString 方是返司数字，这巷数字控削两个 9 基本上根掂是否 有自变 量传给 
法-但在期待字符串的上下文中1 自变量 的排序结果。我们的范例 sor u ) 而决定 e 如粟没有自变 f + 
JavaScript 至少也会}|：报邁到了对用于比较3期，而且希望较新的日則采用赴认方式 t 如果提烘了旮变 
象，当然,此时的字浔串不算非常期被排序在前。蚊新的 E 3 期也是 | r n 則斛释为毐技引用，并竹为排 
有意 sl * 但是否为自定义对象提洪较“大”的日期，所以，从第二个序时的比敁基础 = 所以比较必教是 
toS tiring 則是弥的自由，如果你3期 f 减去系一令 Q 期，可达成把个可选 ( optional ) 自变黄， 

希免它能传达关于对象的意义的诂.枝新日 M 排在敕旧日期前的13标。 

也就是说，只在第二个 a 期大于芊 
一个3期时（蛄果大于 d ) + 才排 
在第一个日期前。 

Ruby 和魔方郭很饫乐 


YouCube 博客现 在很 接近 Ruby 恕象屮的喊方专门志，能全狀界分 
隹她对览//的毎个想汰 - 
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搜索词 C 之谜 


能钐搜索会更好 

作十分 

作常方_功能，尤駿长远顿 ^㈣ #志， 地也觉得 搜索会 



0 t/ 2 UlQ 0 t 

F&Jhd t fx7i7 t(ibt for online. VEkes! 

That ortcmiU-bc^ tesif. 

01^9/200! 

Wet up with is»tic felloe flifbsds diiausj -tht 
DT^SDeel' sf 3. TnTxT/^ii ba "Wlssi! fcslsugs. 


V ° l，Ctj[)e 的捜索枵序代码 
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搜岽 blog 数飽 

YouCube 的 拽 索功能+涉到以骷坏处理 bLog 陴客数组中 的毎则 R 志， 
作毎 SS 文隹中浮找匹配的义+ ^ 



取得用户输入的文本^ 
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宇符串排徘站 



字符串是个可以搜索的对象。 


冇人或仵已经发现 hvaStnpt 里到处都蛙对象，字符 
串蛙对象，而 R 包含很多与字符串数椐 Cie ^ t ) 交瓦 
的便利方法 D 没错，其屮有个方法叶以搜索丰符串里 
的文本片段。字符串坦的丰符串有时被称为子字符串 


巧莓 f 的这£ 。 
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0 ^ 10 20 

H e I I M I 111 I I Ml M I M I HI H 

Got the new cube I ordered. 



rr mm 


汉章的 0 ' U . 字每摩 JltfKtf '' ^ 
4孝苻竽中索引 a 的纪 f 


nndexOf () 若 用于导 找不#在的字符串，结采将为-1。 


穹畀净重的*个字苻伶杉.穷 
材一是 f 二栌索引佔£ . *. ?[ 
认字笏 * 起返处由0种碚 
^ f% a 


•m 。 ©史幻籽 字得丰 




这是 Ruby iSi 欢的谜题 1 谙从中找出每个 " cube * ■子字符串出现位轚的索引编号. 


'A cubist cubed two cubes and ended up with eight» Wae Blue Cuban? - 


搜索 字符串 沟都； indexOft ) 

LndexUfU 方法 t 可在 String 对象里搜索一段文或称子字符 
以子字符串怍为自变 t , 传给 indexOfn 祕 .—因为你在 
String 对象里调用这个方法，故无需传人其他数据。 indq ; X 0 f () 方 
法返四了_卞符串位置的索 U 值.或于找不到匹配子字符串时返 F 1 -U 

vac Str t °GOt the new cube I ordered. It J s a real pearl 
alert (str. indexOf {^naw "))； 


想了解上例的结果——你必須把字符串当成由字符组成的数 





— a 
I e 
llr 
la 


3 —t 
— H 
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习 题解筈 



这是 Ruby 最軎欢的请题，谪从中找出每个 " cube " 子字符串出现位 E 的索引编号。 






香 f 赛咦 S ? 


1 


,f A cubist cubed two cubes and ended uj> with eight, was she Cuban ? 1 


M 的、一 






搜 f blog 数姐 

ti fString 对象的 indeKOfU 方法协助后，字符串搜索已经不算太 
难，但 Ruby 仍然■要搜索整个两其她计划以搁环处理博客数沮, 
.然后使用 indexOf {} 方法，逐一在每则口志的正义内容觅搜索子字 
符串。如果找到相符宇符串，她希嗜以 afert 框表 ； Tk 



< input type^^buttorT id ^" search 11 value = "Search tii& Blog 


技素接 t £ 涑疋 

ttAtch^lcfO 

棺 f 


加入 HTML 的拽索元忐后，只耑要拼凑出 searehBlogn 函数的代 m 
既然 Ruby 想用 akn 框呈现搜索结见，函数也就不盅要返固汀何信息- 
另外也不需耍任何肖变 M % 困为函数直接从 HTML 的 tat 域谈取搜索 H 
标文本 ■* 
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JavaScript 冰箱硪铥 

VouCube 的 search Slog () 函数，负责以据环处理博客曰志 
的数组，并于日志正文中 请 ㈣ Rub y 完成这个函 
数.利用下面的磁铁垴 A 失落的程序代码^提示 f 搜菜目标的匹配 
结果里，应该把曰志的曰期（采用 MM /5&/ yyyv 格式）放在〜对 
中枯号（[】> 里，后随曰志的正文内容 




$eax-chtext 
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JavaScript 冰箱磁铁解答 



JavaScript 冰箱磁银鞟答 

VouCub e ^searchBlogO 负资■环处理博 ? 

的数组， 奸日志 政巾触匹岐本。触⑽咖完成 i ; 
数.國下_磁铁填人失落的程帥队 提示； 搜索目制 
结男里，应该把曰志的曰期（采用 AAM / Ob/yyyy 格式）放 
中括号 （【】） 里， 后随 Q 志的正文内容。 


// If the search text vasn-t foun(3^ di s pi ay a iriessage 


吞珩 0 纪运参 . 
^f^/DO/YYYY 


430 第 9 章 




搜索场能也上线 J _ f 

■ I*. _ ^ iJLJl. I_b t ._■. 


为戣据带来生命 


宇符串(纯 数据) 转变为—个具::绝佳槪本例中，文本 

的是 ？ ㈣ 馳不需‘明====体。或 
』匕、把咖顧:料的齡： [ y ： 她可以专 





9 Q 0 - Tlw Blcfi for Cuba f ^ i ££ l 4 rt 

YmiCube - Th« Blog for Cube Puzikn* 


l 【 n« fc »# 3 . n_ 




Ail Bigig EhIthh I 


wimom 

Wteiup wl 
fc ^ Lngs . 


m son 任 Dow oobersip discEi5£ um prwpKtQi a 7%1%7 Mixed 


mifixm 

Found a 7x7x7 cubcfor uk oolicw . Yit«! Thu one could bt a 




cite iMw cobcl «do&d. If & b. teal pati- 


Stanc h th* 6lo§ 1 17»； 7x7 
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有问涵都不是托问题 




有 a 问紙 

痔鼉问拖 


H 我 还是不 太了解每个字符串为 
什么其实是个对象耶■:真的是这样 
吗？ 

答:真的， JavaScript 下的每 
个字符串都是个对象 n 如果你 
在 JaviiScnpt 中把姓名放左 U 号 

里，如 mb y ' 其实你已泛创建 
了一个对象 = 茧然看起来有点夺张. 
徂 JavaScript 把蚪有字符争祝均对 
象的好处1在于每个字衧串都能完 
成一杳方便奸用的工作，如知道自 
己的长度，搜索子字符中等等、 

闲我知道字符串是个对象了 f 不 
过.它也很像具有字符索引的数组。 
字符串也是个数组吗？ 

爷 ' 不、是 芋符爭绝对不是个钍 
级 a 不过 * 许多 St r i n g 的方法秘 
作字符申觳据的方式，的确很涑* 
对由字符组成的敎迮 u 举例而 r , 
在字 符+内 的宇符索引从（:）开始， 
随击在 字符串里移动 1 索 q 值也送 
增 .， 但你无法以中栳兮 {[]) 访问 
字荇串 化的茱个字符，欵组才能違 
样至然浞，把字符串内的字符 
类比于数组的元素有所帮助、但实 


际处理 sc r : ng 吋象时，仍然与处 
理 Array 对象不 

间 ： searchBlog (:.圉数能够不采 
用 indexed ), 改以 char At () 搜索 

博客吗 

qgr 

v : 不汁 。 c narAt () 方法只搜索 
单一字苻，在寻找短语或丈本时并 
无大用 . indtf x 0£ U 方法则搜索字 
符串，而不只 4 t 索单一字符，它是 
放索馎客的最佳工具。 

1$:有可能在一个宇符串里 t 寻找 
某个子宇符串出现的每个地方吗？ 

i 可以。 i ndexOf () 方士狄认力 
我索子字荇 f 右一次出现的位五 ： 
但诹也可以作人选用的第二个自变 


问： searchBlog () 函数里为什么 
要调用两次 r . oLowerCaseO 呢? 

好问芬案与枕索博客时 
邁到的文本大小写 R 题有关。如 
果有人搜索 " cube ' 1 . 他大棱 
希望找士所有££配这个詞汇的轉 
果，包括 cube 、 Cube , CURE 及 
其他大小写 变化，避开这 个问趨 
的两单方式、就是一并转换搜索目 
标与博客正文的大小与' 再继续 
搜索任务。虽碎 searchBlogU 通 
ft 采用 LoLowerCas e (> 為数，但 
i _ oupperCaserML 有相同以 r 用 。 吏 
点只是 4 t 底消降搜索中的大小写衫 
嘀因素 s 


贫，告诉 i ndexdf !() 从何处 开始技 
索，假设 ^ ubc 11 是对索 a 标，而 
讣已经在索41丨彳的位置发現匹配 
±Jl Umaich ) ,你 5 T 以存次调 ff ) 

i ^ dexOCCK 并加上篆二个0变董 
11，强制要求搜索从索41 1:2的位 
芄开始 n 所以， 通 ffl 方策是把上一 
次搜索到的索引传入 i ndexOf 0方 
法，以继统政索字符串 



复习要点- 

■ tosttm h m \-\ H 涣任 H 对染为殳丰及达形人。 

I ■ 数 m 和 I 符中电劣上都坫封象，依祐 JavaScript 的如 
准对象 Ar r 外和 St - ring 提供方法 L 数据的 f/fiJL 


■ Array 对象的 sort U 方法能依任 M 顺作悱列数 

■ £ r„r 1 _ ng 对染的 ir.dexOt i ) 方_法 / 〖:卞 W 内搜# 兄 

-个卞符串 T 返 ㈣ 搜索 n h 的索引位 KL 
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随机的 YouCube 





维抟敁者的兴趣是项永无止境的任务， Ruby YouCube 加上 M 
一项 Jt 方同好4能有兴趣的功能，她想加 h — 个 “Randoir^ (随 
机)按钮， it 用户随机读取博客日志^ 


^ h , 束方《客± 

人 


你该如何随机迭取博客□志？ 
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归属之地 


Math 对象是个 organizatiowaf object 

为 r 帮助 Ruby 加 i : YouCube 的随机功能 t 我们作常葙要产生随机数 
的方火。 这项: r _ 作 ） t 系到他 n ] Jft 个的内 K 对象, 它不 ff 其 
他我们用的对象一般 " 生气速勃” b Math 对象是产生随机数的地方, 



M 扣边个 Drganizationmobject ( 祖织对象 > , 它只坻数卞相关 Math 对象 是个收 

的公用方法与 常进 的集合 B Mafh 对免屮没有变 ffG 盘即这个对象没冇 

状态——不能川十存储圩何率物。它唯 - 包允的数抿只足几个常陡， 蔵数学方法鸟常量 


例如 Pl (3, 1/1 S . Math 象的 ./ j ' 法很好川。例如 random U //法 

就能产生介干0与 I 间的随机数。， 




请 写出调用下列 Math 方法的结果 

Math,rcnind{ Math. PI) ... 

Math , ceil (Math . .. 

Math.random() .. . .. 

- ► 答 Sila 第 4 ?&舜„ 
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为数据带来生命 



本周主题 ： 当数学函数抵触时 


Head First ； 我茛的很困惑 n 你是个对象，但 

我乂听说你不负责 K 他事，只负飪保存一些数学 
运谇方法和儿个常 S 。 我一直以为，对象的职黄 
就迫让数据有生命力 1 你知 道的， 就是包起一苎 
数据，然后 tt : 方法根据数据，形成•-些 m 炫的结 

Math ： 因袭常 SL 的 MvaSeript 智 Mlh 大家都这么 
想、卅并非所行对象部用 f 为数据带来生命。对 
象也叮以扮演组织人员的角色，就像我， 

Head First ： 考是 ， 这些数肀方法不能创边为标准 
喊数吗？ 

Math ： 黾的， 也可 以， 但你忘 U ! HavaStrifnifj 言 
原冬就以对 象速 化的^ 所以 就唯实 而言- 其芘没 
冇“标准 ”闲数这 痺亊， 

Headfirst : 但我可以在对象外创建函数,而且它 
O 也能运作良奸啊？ 

Math ； 没错，何丰实 K 听有确数那迫方法，它 
ff j 禺1 ; 某个对象，即使你#不到藏起來的对象 - 
这样应改有助释没冇 41 标准蜣数”的 H 题。 

Heid First ； 原来如此连你包含数学方法的 
原因，我也开始有点概念了 B 

Math : 也别忘记、里然我没有内部数据可供方法 
橾纵， m 不表示我这个对象失忐了重要性 a 

H«a First ： 这话怎么说咧？ 

Math ： 假设有群人都对朦方很惑兴趣 • 他们常常 
m 合在一起，为了有兴趣的主题互相交流。数学 
方法虽然不像人类一样# r 交性，但的确因为我 
提供的组织性而受益。 


Htad Fim : 你是指闶为沿们都 H 冇共问的 兴趣？ 

Math : 是的！而这份 K 趣达成了数学任务.例 
如叫 舍五人 数字、计笃三角函数，产生随机数等 
等。 

Head First ： 你刚刚提到产生随机数，我听说你产 
生的数字并非貞 iF _ 随机.这是丰实还是谣言 呢？ 
M . sthi 我必须承认，不娃真 iF . 的随机。大部分 
计算机产生的随机数也非真 iF : 的随叽数字，我的 
陆机数是 61 伪随机数"，大部分怙况 F 已经足够 
了， 

Head First ： 伪随机数，就像伪科学… ■”忐 是伪代 

m 

Math ； n \ L , 前若+对，后者是对的。我跟伪科 
学点关系都没有。还冇.是的，冇点像是伪代 
抖，因为伪代码试围表达代码背后的意义,，但又 
井作真正的程序代码 D . w 陆机数的状况_娃近似 
随叽数，但不是與正的随机数 。 

Head First ： 这样子啊 …… w 伪随 机数” 对大多数 
JavaStript 应用程時 ' 而言 ， 够 M 机广 〖| 马_? 

Math ； 可以， 而且你说的“够随机"也适很好的 
形容方式 & 如果是国家安仝这种大阵仗，大概就 
不能信任伪随叽数，但如果是在 LJ 常使用的脚本 
电注人伪随机数，它 ri 的工作惜況就还不错， 

Head Fir « : /解 . 谢谢你接受今天的访问……尤 
其-是关千随机数的诚实说明。 

Math ： 我也 很离兴 …，”你知道的，我没办法说 
谎。 
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习题解答 



请写出调用下列 Math 方法的结旲。 



使闲 Math.random 产生随机数 



无论 M ； 否为倚随机数，由 Math 对象的 random U 方法产生約随机数.对 
YouCube 这炎忠要从一组数据 巾随机 选择的应用裎序非常有用^ ㈣ 题在 
F ， randoro () 返固的数字介千 0 与 t 巾间 t U Ruby 需要的随机数則是介 
千0与 t > log 数组的长度中间。换句话说 . 她需契賊机产生博客数组索引。 


0 . 789902 * 671 ^ 5 ^ 0 * 


想产生范阐不限 T 0到1的随机数， 職要 史依赖 wt h 对象并使相 
其他方法。 tioorh 可以把数卞无条件舍去: ii 揿接近的整数 t 它很适 
合尔既定整数抱囤内产中随叽韨玫 - 
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问：为什么在使用 Math 对象前，碎 h 


不需先创建这个对象呢？ 

答 T ^ ， 这是个关于杈念的 M 
题，而 1 L 碰触到一个关于对象的 

极重要杈念 a 既然 Math 对象并未 
实际包含 T 以使用的欸据（也称 
为 tn & l^ncc data > T 所以不需要 

刨建对象 Math 吋象只是静态 
(static } 方法和常 f 的集合，进 

人 Math 对象里的所有事物均 6-4 
在——没有刨建任何 r 物的需要。 
到了莾10章，讨论过对象实例 
{object instance) 和 类后， 你会比 
较容易 了噼! 1个主题， 


Math 对象的 roundn 和 
floor () 方法，有什么不同？ 

^ ; - round (.) 方法根据小数 A 后的 
位数决定进泣或舍去 t 例如 Math , 
round £ 1 1.375 ) 的结果为 
Math , round ( 11 .62 S ) 的 索去果 S 1 】 为 

! 2„ 另一方面 、 f loor < ) 方法則直 
接舍去、不管小数点后的位数。你 

可以把 f loorU 视为.直接政掉小教点 
后 的 H 


^ : Math 对象还有瞬些能耐昵？ 

^ ；很多<! f 是两个我们 I ]前 
用本到的免利方法 minU ^ maxO , 
用于分析两个數字，分别猫传较小 
或杖大的 fe 字， abs (> 则是另一个 

非常好用的 Math 方法—— 它负贪 
邱传正数，无论你给它什 i ； 数字。 



妓客新知 


如果你发现自己遇到严垔需要正牌随机数的 
JavaScript 话棘每至彳 http://rondom org, 了解 

如何超越伪随机数的国度 D 


上陴 


请设计 randoms log U 的 ® 数代码 . 它能隨机挑选博客的曰志 , 
并以 dert 框呈现挑选结来 6 提示：以 deft 框呈现的曰志，可采 
用 -'jsearchBlug ( 丨相同的格式 „ 
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甭笔上阵瞬答 






数批这惲客的5忘=< 


fvn « t ( o»t rawdowfltogiK 


请设计! rat ^ om & iogU 的函数代码， 它能随 机挑选 博客的 曰志. 
并以 dert 框1蚬挑选结果 a 提示；以 dert 框呈现的曰志，可采 
用与 searchBlog (> 相网的格式 P 

户 S 介子0 釦珣 窬 逛圯长 
4间的柢机盎 3 


ff Pick a raniftmi n 抑 b€r between 0 and bloq.length - I 

i r i r i p i ■ i ps ■■冊 '■in I * s ■ b f ^ r a p i p ^ p ■» p » p 1 ■ i ■ ! ■ p i r a r t v n f ■ f ■ b»_i pi-*- ■ ■ r ■ ■•■ b i 

VAf i - MathiborfMath.raptfoihn * blog.kh^thh ^r 


alertCt' * 【 b—[ild. 在 t^ell^orrFhll * 1J * V' + biogUl.d^e.getPal^) 4 V 
bl ogtil.da te r q^ tfol IVea rf) + ■] ■ * blDqUI.bodv); 


铪出战 粟中的 & W 采较 

YWY 格式 j§ K 



随机 ® ili 布不足 

Ruby 的博客已能支持随机搜索功能，她很 高兴， 现在，浏览 
YouCube 博客的用户，都相当地好奇，因为他们无法预渊出现的日志。 



咖咖 for 必 oo ㈣ Y ㈣ 個 淋 twb *. ⑽ 


ofi1i7)t7CU^ 


|S/l£/200ai Mirugad lo g«t 

i«P- 






^ ° Gew 


虽然新的博客功能 U : 人兴& t Ruby 却一 
直有种 YouOb E 若有所失的怅然惑，地 
的 Blog 对象现在还只是 ；1 个特性 T 仰 
赖 一些分散的函钕.听起 来+汝 裉好的 
对象设计•… 
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为数据带来生命 



Ruby 关 T YouCube 对象的 S 觉完 仝正确 ， U 前极度缺乏对象的行 
为部分，适合认真地电新架构. it 对象以方法管理 tr 客令用的仟务。 
Rtiby 涪踅为 Blog 对象增加行动的方法 [ 


请研究 VcuCube 的代码，并圈出任何你觉得可以制成 Blo 9 方法 

^ 的部分 I 诺记得为每个方法命名. 

function showslog(numEntries) { 

// First sort the blog in reverse chronological order (most recent first) 
blog.sor t{func t ion(blog 1blog2) { return blog2.date 一 blogl..date ； }}； 


// Adjust the number of entries to show the full blog, if necessary 
if (inumEntries) 

numEntries = blog^length ； 


// Show the blog entries 
vat ： i ^ 0 f blog Text = iiB ? 

while {i < blog.length i < numEntries} { 

// Use a gray background for every other blog enury 
if (i % 2 == D) 

blogText += h <p style- ? background-color s #EEEEEE * > m 
else 

blogText 十一 


// Generate the formatted blog HTML code 

JblogText += *<strong> H + (blogfij.date, get Mon th( > + 1) + ! 7 H + 
blog[i| .date.getDatef ) 十 "/■■ + 

blog[i] .date.getFullYear (} + "c/strongxbr />■ + 
blogfi] .body + ■</p > w ； 


// Set ： the blog HTML code on the page 
document P g et El n t By Id (■ bl og") a innerHl ! ML 


blogText^ 




Cunctiori sca ； rchE3log{} { 

var searchTexL = document .getElementByldU^Searchtext 11 Lvalue;; 
for (var i = Oj i < blog.length? i++J { 

// See If the blog entry contains the search text 

if {blog[i] - body.toLowefCase{Jr indexOf (searchTe>ct T toL.owerCase ()} != -I) { 

alert{ m [ a + (blog[i] - date.getMontht) + 1) + n /" + bloq [i] ,d ； atergetDate{) 
blog [ i 3. dat e. get Fu 11 Yea r {) + n ] " + blog[i]-body 
break ； 


If the search text W 3 sn r t: foundj display a message 
{i == blog-length) 

alert< "Sorry,, there are no biog entries containing the search text 


function randoinalogO { 

// Pick, a rand am number between 0 and blog, length - 1 
var i = Math., floor (Math* random 0 * blog- length); 

al&rt( w， | , " + (bicig 【 i) ■date.getMont:h() + 1 ) 十 H / n +■ blogli] .date.getDate() 
blog(iJ ,-date,getFullYear(} + H ] w 4 blogfi] .body 
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磨笔上阵阐笞 




解答 


请研究 VouCube 的代码，并囹出任何你觉得可以制成 Btog 方法 
的部分 E 请记得为每个方法命名。 


function showBlog(numEntries) { 

// First sort the blog in reverse chronologica1 order tmost recent first) 
blog.sort(function(bloglblog2) { return blog2.date - blog 1.date? }); 

// Adjust the number of entries to show the full blog, if necessary 
if (inumEntries> , ^ 

num Entries 二 blog-length ； 篇博窖 c 杏糸 H 奇格 


// Shaw the blog entries 
v^ir i = 0, blogText = " 11 j 

whilg il < bloa.length && i < nuF ； Enbries? L 

/i^Ose a gray backgrouriO ±c?r every other blog entry 
T {i 1 2 == Of 

blogText += "<p style= J background-color ； #EEEEEE >" 
else 

blogText += 

// GeneratG the formatted blog HTML code 
l blogText += 11 <strong> tl + [biog[i], d ate. get Mont hf) + 
blog [ 丄 J .date-getDatef > + V' 1 + 

blog[i] r date,gGtFull¥ear (} + *</strung><br />" + 
hlocili]-body 4 - 


式栌 HTMC , 令名寿6£作 
ioHTiVitO^ 



14 + ； 

} 

// Set the blog HTML uude on the page 

doc: unscsnti get Ele me lit ByTd ("tT;.og n ) T inner HTML = blogText; 


function searchBlog() { 

var searchText - docunrient .getElementseerehtext 11 value 
for (var i = 0; I < blog.length; i++) { 

" : f. _V|^ Vi' ■"■2 1-；/ 1-rMnl-a-i l~ AAA t AVT - --- 

if Clbl og [ i ]. br. ； d> r . t qlov^o r Ca s e 0 . „ -1 d a xC., r ； 8 e ^ r c hTa x L . t oL ewe r C'a s e O > 】= -11 f - 

aivirU f "[" + ruu.ogTii.clate.ge 1 . HotiUl! I !]•■ + :/.+ ologtij .date.yet[>ate[> + ^/'' + 
C l^logf[i .； -datQ.getFullYecAr{} + ’】 ’ + blogl i] .body}; 
fcreaxj ^ ' 

} 

} 


// if Che search text wasn J t found, display a message 
if (i == blog.length) 

alertf'Sorry^ there are no blog entries containing the search text + ") f 


function randomBlog()( 

// Pick a randoju number between 0 and blog.length - 1 
var i = Math.£loor(Math,randonU) * blog,length); 

alert (" f 十 (blog[i] + d^te.getMonch() + 1) 十 V ■丄 blog[i] ^date.getDatei ) + */■ + 

blog[i].date.get,FullYcar () + " ] " + blog [ i ] ,body) - t 

} 


9i-cs. tfi H TMt Q 

H 痴填 I 笱态窍 f 年格式 

战. ^ K ^ P . 5 ^ ^ ^ ^ (m 

HTML 格式钓 ) D 恚的杈 埤代踢，玄 


CCntsinsT^xtO 

代 (5 不多.代化饵柚在於一个方 
:■在.逻為律吝 f 左应茂梂移攬索 
t &的内容 i 体" 


S(p S . tffSiid'w^O 

轉 M 详睿0志治令 符赛。 去5期 
志 iiPiJ. 妩索： 资上泌 公確 
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f 5 ) 4该如何知道代码应放入方法 
呢？ 

^ : 这个嘛……首先自我回想一 
下，何为方法的理想 u 的？答案就 
是根柏对象的状态（数拐）而采取 
某些行动。到茱种程度，理解对象 
里的方法，也包括理解吋象的实际 
功用，或是需求，鴆后专 a 于强化 
对象对自己施展行动的能力 3 



以 Etog 对象为例，它拥有自我砖换 
汚宇符串或晰格式 HTML 代码的能 
力就很合理，因为这两种行为需要 
仿冏对象内部的数掂、相似地 ，在 
博客3志 .里搜 索史本 . 也应该是 

Slog 对象的内部行为.因此很 it 合 
制成方法^ 

:那有 Blog 对象不该采取的行 
动吗？ 


^ ；只要超过 Blog 对象的作用域 
都算，或许单 J ： 现或技索博客 S 志 

列艮，因为 Blog 对象只负责里现单 
一 3志 & 这也是 blog 数组泠何包含 
多个 Blog 对象，而每个 Blog 对象 
不需把自已视为 Blog 对象大果合的 
一部分 _■ 各个 Filog 对象只应该照赖 
自己的事务，包括恨据自己的 E ] 期 
和正文而抒动。 


拕焱数转变为方法 

既然 e 经隔离出 YouCub t 电某些适合怍为 Elog 对象的方法的代码 + 
我们就来仔细观察把它们转换为 Blog 对象方法的过示范方法是 
CQntain ^ TextO , 它负责在博客 H 志€ 文电 捜索子字符辛，把捜素 



用的程序代码移入方法，主耍关系到直掊损作 Blog 对象的 body 特性， 
u f 与仍为5^1'^^3109()函数时操作局部变；^:相对照。下列步驟有助 
十厘堉过杩 i 


声明方法。如采必要，则完成自变铍列 
表 ，例 如 con t : a i n^Text { } 所忠的捜索 
目标文本 6 


把现有的程序代码移入新方法 3 L 


炫改必耍的程序代码，改为使用对象特性 

例如00111:彐1打&] , 白父11()的 this . body fl 


请设计 &】0 g 对象的 conLainsTAxi ;(] 方法，借由指派函 
数字 面置给 tMs , contajAText f 于 Blog 的构造函数里 
创建这个方法。 
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请设计对象的 contei 
给 this , Cont . ainTRvr - 


-nsText [) 方法 ， 借由指派函数实字 
于 Blog 的构造函数里创建这个方法。 


诸由指其土踱字®蓍铪方 
i $ 考]滅 ：. 36釗逮方4 


g 


贫启泛用关铒 fA 


绍辛 Mis 茂句时象故传, 


// Return a for?n^.tLed HTML r^pres & nLaLion of Lhe blog entry 薦 
this r toHTML = functiorU highlights { 广塞 

// Use *5 gr ■ 為 y as a highlIghL P if specified ^ '®" 

var blogHTML = ■. H ; ^ 

blogHTML += highlight ? m <p si_yle=fbcickground—coior^ftSEEElEEl 11 〉"^ 


-H 


<P>" 




// See if the blog body contains a string of text / ^ 
this.iJODtainsTsxt = f unct ion (text) { 

return ( fthis - body . toLowerCaset ) .indexOf <text r tQLo - werCs & e (} j 1 = - 1 ) 








为数据带来生命 


对象为 YouCube 傲 3 什么？ 

江到 B 1 o g 对象的新叹本（可 ^http://www.h eadjirxtiahs. com/books/hfjs/ 
下跋 } 插人 YouCuW 轉本，面向对象程序设计的好处才敁现出来。现 
在有好几项博客令用的 仔务都 蝥派给 Blog 的//法，脚本因而简革许 
.多 □ 


崭新的 Plog 对象简 
化3 YouGube 敝本。 


// Show the list of blo ^ entries 
function slnDwBIog(numEntries) { 

// First sort; the blog in reverse chronological order (most recent first} 
blog.sort (f unct ion(blogl, blog2)- { return blog2 — blog^dSite ；]); 


// Adjust the number of entries to show the full blog r if necessary 
if OnujnEntries) 

nuinEnt ries = blog. length ； 


) 


if Show the blog entries 
var i = 0, blogListHTML = 

while (i < blog,length && i < numElntries) { 
blogLi&CHTML + 二 blogti],toHT»CUti % 2 == Oh 
i't' + r 

} 

// Sec Che blog HTML code on the page 



tpHTMlO 方砝金鼉资贵 HTML 格 
式加 H 馎害 € 主土的 ♦立。 


ducucflent.getElementEyTdMtolog 11 )」innerHTML = blogListHTML ； 


// Search the list of blog entries for a piece of text 
function searchBiogf) { 

var searchTejct =- document .getElemenCByldpse^rchtext h ) .value ； 
for (var i - Or i < blog.lengthy i++) { 

// See if the blog entry contains the search text 

if (blog[i].containsText{a ea r chTex t>) 

alort [blog[.iJ),7 * 


break? 


} 


} 



專中龙索 子字符 Jf 


tC » StT ； m ? 0 古 _:4 tfc 蚊砷窑■达 
彳朗恃媾|0态 4 嘍符事辂 
式 ㈣ t ) 破螢 id 讲用^ 


// If the search text wasn't found, display a message 
if (i == blog.length) 

alert{_Sorry P ther^ are no blog entries containing the search text ..")； 


// Display a randomly chosen blog entry 
function randomBlogO { 

// Pick a random number between 0 and blog.length 
var i = Math.floortMath.random(} * blog-length); 
alert ( blog [ i 3); 

} 
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准备迈向成功之适 

VbuCube ^0 

经开 AVOUCH 3. oe 
准备好奸秸心打扮-•番 .…. • _適此 __雌败会， 
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JavaScript 填字游戏 

Ruby 已经为这_釗等 7— …… 谜题现身！不过，这可不 
是魔方，而是填字游戏。这个嘛……鱼与熊羋不能兼得坰 T 



横向 提示： 

L 使用 Siring 的_方法技索丈本字符串。 

4,当你把卨故放入对象*它变成_ 

6. JavaScript 数紐和字符申其实是_, 

8. 忱用__访闪叶象里的成灵 E 

1 L 近乎隨 机， 

13」这个方法转柏对象为丈本字符串， 

14, Ruby 的家乡。 


纵向 提示： 

2 . 便用这个对象处理时间， 

3. 一个尤条件舍去笔数的 Math 方法。 

5. 在对象中，特性存飿_。 

7,对象特性在此创建 
9. 对象置的一块教据。 

10」方法让对象能接受_ . 

11谭这令方法，以改史数 妞元素 的排序 ... 
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JavaScript 填宇游戏解萏 



JavaScript 壊字游戏解答 
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请垂直对折本页 + 模拟左 
右脑的区分，并解决我们 
提出的谜团 。 


Page Bender 


JavaScript 希望对枭对数揭做什么 



參 






m L 



欢迎备忮导惰搜索，侶在揸菊 

和分析数猫上，大梅很难 
找到比 JavaScript 对象更炒 
的工風。 S 们 IE 线 
随机排列数字也不费吆疾之力。 
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10 创建自定义对象 



省略中闵人，现在軾行动 t R * 
—械钱，保 ii 发大财… … +如 
I 饰现在 SHr^ T s 上财能为闭 
欲为，宝 Kf 


自定义 k 象 
让你为所欲^ 


如果有这么简单，当然谁都想做 ^』 adscript 没有退货保证 T 但你 绝对 4以 
比它眧阼的意思行动^自定义对象，就像 bvaSeript 版的极热去奶泡不加鲜奶油 
要三份低咖啡因浓缩咖啡的大杯摩卡玛纾朵……奸一杯特调咖啡啊！有了肖定 
义 JavnScripr 对象 + 你也能犮出任你操纵又利用了特性和方法优势的代 PL 最后 
其至能制造出可重复使用的面向对象程汴代码，既扩展 r JavaScHpt 语言的效率 
…“而且乂只为你服务！ 
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Blog 方法 


重新壹着 YbuCube 的 Plog 方法 

駐为 m 客_立關狀良这是个由轉 

(針 ㈣ Y — _象 ）， r tl 
对__■机③謂扫 培用面向 

作方式 ，^ 她絲对象的制 

屮、更有组织_未来也 闽此而 更容易维护。 

Ruhy ^ Blog 稍的最后-，次随 _ 贿獅 I ' J^UMj 

觸其专_ ㈣ 。 ■以」域， U 处埋- 


YbuCuhe 馎窖玎吆运 

作，佴还不是©尚 

对象裎 序设计 的标 
竽。 
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A « Pl // 

Blog heAiii，is ^ ^/iooks/hi }S / j. * i ： 


// 左 ce* i C l he bloq bcjcfcy cnritciina a i: L r Lnq aF l e*-xt 
r fj i £.. con I - 1 n funct L^nltr-Kt I | 

e ftur【i < l ft i s, tn ： H ； 1y, LoUjv^rCrj ee< \, i ndexOf I r. ew c. e ： ot.me tCa 11 ■!= ] ^ 


，r i_n_n hi ng | hg^d/, dcatei ji | 
\\^ t - g n LiLt: L i^-ts 

l_^. body - fcidiy: 

^V 3 dLt' - d.d B -*l 


^?i_u3 ri d B r . - ： j，u i epr^s-en ： >at i ^>n >：^ ^ h-Jcg ry 

fs. toKL r inq: f u.n.ci ion 11 I 

r^r.ucira ■ + .da^^-ge 1 ： NoriT h(> + ij ， -■■ + x n I s r L ' r * 

Lhii ： .dflLe s getFul lTe--ar 11 » F ' ■ i 1 hiss..bodyi 


/,*' Return d fcrm*alLed HTPSL ri^picEcnlal Laf- u£ tht fc bloy cat ry 
r h Lfl.i'ciHTM：. s f y nc e 3 am ； h igh L i qhT ^ r 

// Use a ^ t dy ae a Kl^h] jghi ： . II ^p-ec i F I eel 

var b]aqHmL ■ mm * 

bL<igHTMI. ■*■- h tghl Igrat 7 *vp s ： y i n - twL- <g round - r；o I or : p PEEP ： F.F. >■ 


// cn^n-^rAr e t he Enrmmtnd bLng HTKL. rr&df, 
bl-ogirrjHL ， "^isttCj-ilijjv*- - iT Mift.iJ-i'Litf.iJi^tHonT h 0 - I】- 

t h i ：:■. dft l c „>ic L Da L £! U i •厂 i- l h L a _dd L c _qet Full Ycd. r 1! 

«L hJ f-.i> 0 K 3 y * -'p>' ; 

return b 1 o-qtrrML ; 


» ■c(st r a:niq _cbT f >■ t 


toString () 


date 


in *， 29»i, aoiia3®__z^^^f 

,,cont ainsTextf ) 


5!出 0 9对象方法负责 
麵钟志里运 






甚个 釗達的 
& 的三个轵叫方 


Blog 对象无可避免地创建了超过需求的方法副本，这是种 
非常浪费又没效率的行为。 


没错， Blog 对象海次都新创违气个方法.韧个 Blog 对象都柯自己的 
i 个方法训本 D 不像特性 盂耍为魟个 对象存储独特数据、方法应 ⑷为 
对象所 共享， 如要所有 Blog 对染共 享一份方法副 + t 将是也奸的设 
H-o 如此 -来 _逐渐加入更多博客 0志 I 对象）后,可防止脚 本因不 
必崧的方让而膨 
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类…… 在这个 实例里 


类乌实倒 


方法四处复制的 H 题碰触到一个与 JavaScript 对象相关，非常重要的 

概念：对象类 （ class } 与对象实例 ( instance ) 的差异。类，是对象的 对象实例 

描述，一份描绘对象构成的揆板 a 实例，则是实际对象,从类中创逑。 ^ ^ 

以现实生活比喻的话，类别就像建筑蓝图,对象则是实陪的房權，就 
^ JpvaScnpt , 你可以根裾一个类 {:蓝 图）违造很多实洌 （房岸 .） „ / 


/ 


\ 







对象类 


Blog 


多 丈存 L 
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裉椐类创建实例 

努描述对象的特性与方法，实例甽把珣正的数据放人特怍，泮为数据 

Ti : 人 .1: 命 K 每个实体都有向己的特忡則本，因此实例才能与其他实例 
有所不 N 。 


备个淀叫的辩 ftn 津釦孑 
择.新 以毐个 定刮对# _ 
t ) £的鞾 fi 糾本送是曾走’ 



创建自定义对象 

对象类是种 
糢板 ，对象 
实例則是根 
椐模栢劍建 
的事物。 


ttii 



，r Met up with 

--- 

some..," 

August 29th r 
/ - - — 

2006 
■ ■ . _ 

f functionO { 

… } ^\^ 

f unctionf j < 

- 5 ] 

YfunctionO [ 

-1 j 
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深思熟虑……一击成功 


吆 this 达闷实例的特性 

到 U 前为止 ， 我们处理过的所有特性都是实例特性 (instate property ) , 
盘指 它们为 实 M 所拥右、吏氓耍的达.柿个实例都有 A L 1 的特忖副本。你 
蚵以轻品分辨出灾例特性，闲为它于构造函数中使 ff ]； X ： ■键 Tthib 设定， 


function Blog(body, date) \ 


this .body = body? 
this-date = date ； 


卵 



W 外述 有头例方法， fK 它们比较狡猾一点 T 闲为它们 4 被实例或赉所 
攔有。我们只创迚过负例方法——使用 this Xi 键卞设况-这去 
氺它们被各个实例所拥有> mmn 「方法 会被 k 制到毎个文例的原 

ESU 

Function Dlagibody, date)( 


兵鍵字 this 用 
子设 S 实例綑 
有釣特性和方 
法 0 



荖个的贪則部 
辛65的方法的本 

Y 



旮均违 这數中2牙 


5 M 


mp , a 定义对象件作都娃把力法复制到每个新实例的浪货设计。解 
决方案在十另种创迮方法的方式，可 H 实例 Jt 窣 N —份方汰代码 a 
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创建自足义对象 


摘有一次，迗行多次 ： 类捆有的方法 


有种实例方法 g 接为类所有 i 这教示该方法只有一份，由所有实例共皁 。 

类拥有的究例方法 (ctass-owned instance method) , fct 起在 M 个灰俩里各 _ 

rr - 储一份方法，实在有效率多 r , ^ ^ &个方 a , 

7 - 牮 4 翱一汾 



Blog 


&普农蚵吁龙中鞾乜唪 

：i 奶 
at 龙得 il 


这里的实例方法只 
是对类里的方法的 
引用& 


Plog 


SI 09 


3方法为类所捕有时，所冇该类的实例都可访问力 H 因此不#嬰 
M 外 k 制一份。这样比较有 效率, 尤其在程卬创注汗多对象实例 B-h 
你想想方法的众多训+将吃棹多 少々 : M ?以 YoaCybc \个 h - 

Uk (toSLring \ ) . COH ' f'Mbf ) H conta insT'ext \ ?) 将被 T 乂必要地贷 

制到创建的每个博荠 n 志中 □ 


方法存储在皇里，让 
所布实例共 : T — 份方 
法代铒。 


、然，我彳「〗盅要把；/让的拥有权指派给龙.而+延指拫给吊 -xm 
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每个对象心中都有…… 


在类爸，使用 prototype 


多 V f 每个对染郎有个隐硗紂象 pror c^ype (它以特怍的形又存 /!-:} ， 
JavaScript 中 的类才 能成 與。 prototype 对象用千设定说属 |类层 (class levd ) 
的特性 与方法.，而作厲于实洌的》以方法为例的，使用 prot 钟分 pe 对象 ， HfI tJ f 


创达类拥有的 A 法。 



picfD^Sfrt £_ 1 衿卖拷 
4 免. 


以上例而言， toHTMl.O 方法 it 接附加至 Blog 类本兑，而非隶 糲于某 
个类灾例。尤伦 Blog . 类创扭多少劣例，部 U 会七_ - f ,> r . oHTKL ( j 方 



new Blog( 11 Not much going on." r 


) 


varr blogEnt ryl 




* 




b 丄 cigEnt ryl.toHTMLO 
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刽建自定义对象 


类 、 prototype M YouCube 

Ruby 替时无法消化这#关干类与原型 ( prototype ) 的讨论, 
川 ■地 消趙知過，拉歌 新思考 - 4 log 对染 加上 protof.ype 对象 
的存储方式， YtmCube 将冈此受级， 







Blog 


toHTrt^O 







.ta … * T * xt 。 


笔上阵 


豳霤 


Blog 代码现在改用对象存储方法，比方法为类所拥 
有。诺圈出桕关代码，并解梓各段代码的运作。 


function Blog(body, date) { 

"Assign the properties 
this.body = body ； 
this.date : date ； 

J 

// Return a string represent a t i on of Lhe ： blog entry 
Blog - prototype. to St ring - f unction (> { 

return •【" + {this..datG.get^onth () 斗 i) + */ n + this.date.g^t-DateO + H / m + 
this.date.gGtFullYearl) + n ] " + this.body ； 

3; 

// ReLurn a format L^d HTML : re pie sent: anion of th-t? blo-y ent^y 
B1 og.piototypt*. LdHTML - furtct ion(high 1 ight)( 

// U^s 占 g«ra,y b-inc: kg round as a highl ight j if specified 
var blog HTML ^ n r, ； 

blogHTML ★= highlight ? "<p style=background-colors »EEEEEE> m i n <p > m ； 

// Generate the formatted blog HTML code 

blogHTML ^ = n <strong?" * (this B date, get Mont h(} + 1) ^ m /** + this, date -getDa tet) 4 "/ 
this.daitie.getFullYGarO + n </strongxbr />* • this-body + n </p >"； 
return blogHTWL? 

}? 

// See if the blog ho6y contains ^ string of text 
3 log .prototype ， contai nsTe^t - furict ion(tifext) { 

return (this,body • t oLowe rCa 各 e( } r 3ndexOf[ text . toLow ^ rca )) != -1); 

}? 
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掩笔上阵解甚 




磨笔上阵 
躱答 


作的齡 A 扣埃化_ , 


// R^t.yrn a string representst ion of t he blog entry 
Blog ， prototy|?e.toS 匕 ring = f unct ion<) { 

return " [ 11 十 ^1 ： his .date, get MonthO 十 1) 十 'V + this-date-getDateQ 
this.date-wtFullYear (I 4 - ♦- this .body 


©的方 4 斗來飧相浪给坤宠执叫 
* i».j r 指士 B 幼町右■法夺构迮在 

數外. 


// Return a foxm-itlied HTML represent at ion of the blog entry 
Blog.prot otype. toHTML. f unc tionfhighl ighn 'i { 

// use a gray background as a highlight, if specified 
var hlogHTHL = 

blog HTML +=■ hiyhl i ght 7 ■■ <p s t y 1 1 ： = bac kg round-color：# SEEEEE> 




更有效率的 YouCube 



YouCube 博奔 _Ci 使用 类拥有 的方法 ( clafts^wned method ) 乘削减多余 
\ mm , 都艇感谢对溆原⑨ ( objct ：! prototyping ) 的 I 办助。 无论创钮了 
多少个 Blog 对象,专法都只有 feK 阴为它们改寒干类„最酷的是， 
从 YouCube 脚本的角度使川 Elog 对象时,一切郎表改变。 
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创建自定义对象 



S 习要点 


■ 类是对染的描述，吹例甽垃实际的对象，根据对象 
描述所创逨 D 


乂谜卞 t hi □ 用于从实例本身的程序代码内 u ： w 劣 
例。 


* 戈 -Qd f 对象的特 n 与方法 、 实例則把离疋的数据 
放化特性 f _ 以供方法利 


prototypn 对象比方法可存储于类内，以免头洌不 
必要地一芪&制枵序代码 a 


有蠢网题 


1^ ^我坯是不太了解类与实例的大 
观念耶？到底哪里重要？ 

答; 关于类的概念，是让 K 对象的 
创建和童复利 m 11 更为 容易。 你〒 
以倥天郜拿来釗建只使用 丰次 的对 
象字面 f , 一幻都 没有问题.只不 
过你真的不必滇费这么 f 精力，闽 
々你只是在1制自己的成果，浪 e 
不必要的时间 a 有土诔建筑师每次 
建遣同一空房座，士1：^#重析绘制 
一磺一样的蓝阁」 

何不创建能用于尽忮创建实例的揆 
敁，以节省更多精力呢？ iii 尤是类 
的用途 刨璉一个类，而后于需 
要时使用它，尽情创建实例 3 

1^1:所以说，类让创建相似的对象 

吏简单 。 {s l h j s^Bpr ot ocy pe X 

怎么会搅和进来呢？ 

^ : 关噠字 U ] is 从实例内的方法 
访 M 实例，它的主要用途在于访阿 
实例特 性。. 假如你想诸问粟令方法 
里的 >:特性 s 即用 t h i s . x 。 如菜_你 
只讲 X . 代码无法得如你其实想访 
R ! 实詗里的特性，代码可能以为 x 


是个吏 1.. 所以在构边禹数创建 
和初姑化特 性时， 需癸使用 this 。 

p r o t o t ; y p e 的故事则完全不一 
样，它提供刦建类的机制。位 
不潭 t : + +或 J a v a 等其他程序语 
t , JavaScript 并未真正支持类作为 
讳 ■ 言的具体构成要素， JavaScript 
使用 prototyped 馍拟类。结菜很 
相似，但 JavaScript 还需要我们操 
^.prototype (出现 为每个 
JavaScript 对象里■的I 1 惠成对象）以 
创建 “美' 透过把特性或方法存 
储在 prototype 对象里,即可有 
效地将其当成类的一部分而予以访 
问， 不再只是实例的一部分， 

构造函数在类方程里的地位是 
什么昵？ 

答:构达馬教是创建 JavaScript 类 
时非常 t 要的一部分， u 为它 n 灸 
贪剖过对象实例。你可以把构浼函 
数如原型分别当成 JavaScript 类拼 
图的内块重要 拼囷: ■ 构遑痂数為贪 
设定实例的一切事项.原空則处理 
类层的一切乎项。两者同心咏力蚨 
予某祌資格.让我们有能力达成一 


些很酷的事，因为把莱些成资放在 
实例层1有些則放在类层，有其强 
边性的理由 a 表章后续仍会链续扼 
讨这个主题。 

问-我对对象的命名惯例还是有点 
疑惑 u 有时候对象会用首字母大写 
式， 有时候又采用小写驼峰式 . 我 
错过了什么规则吗？ 

^ 2 对象命名的唯一原则 T 只有 
贯字母大但实例的命名別采用 
小写骀峰式 4 因力实例其实是个交 
变量的命名僅 例是小写舵峰式。 
你会觉得不逢贯的原斡，多半荣因 
于我们使用对象 " 时的定义比杖 
松散，为了准确趑见，涑 Blo g 类应 
该首字母大另，至于 blogEntry 或 
b . l.og [0] 这类实例边该采用小圬驼 

如炅因想过去潼用的其他标清 对象, 
这项命名惯例也就合理了，你可以 
存储 H 前的日期/ 时刻 于名为 now 的 
窆奮（实例 ） 里 T now 則由 Jot e 对 
象（类）所创達， 
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谤在这里签名……还有这里……还有这里 


为博窖加上签名 

Ruby iR 在为 YouCube 发撷商 向对象程序设计 （ OOP ) 带来的 效率芍 
组织改良，但她的兴趣远不 R 在背后改善 II 序代妈而巳……她想加人 
新功能。 



VauCut>« - Th* Blog for Cub* Puriters. 

._ —-.. … ■ ■' ■- 

B 1 吨 for Cube Puizlm 


Search the Blag 




M« up Wrth Sf>™ f^low cuberrsK) discuss the psospetiof a aibe. Mbted 



a 7jt7s7 cuhe for on!lne. *Hia[ one t^iuld be a bc^t. 
Srtlv^S^ f»w cube bvii of course, nnw Ym horod and shopping for a new ™. 

Man^d^to g« a btadac^c loilmfi nvcT the new cube.GfJfra rap. 

8/14^008 ， 

Goc the ne^ cube I cmlered. Its b real 

Show All Btoq j }Viw ^ RandornElog Entry, \ 


Rutiy 想到 T X ； Eiog 类加丄 signature 特性或邱弃效，然后, 她只 
耍在构造涵数里设叟特性，再干毎则日志中列出签名……向题解决完 
毕 ■… .■ 




Ruby 应该把签名创建为实例特性马？你可以想到任何反对这种方式的好理由吗？ 
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创建自定义对象 



^:我一直看到 u 面向对象”这个 
词，它是什么意思？ 

等 _枴序设计图里非常常用“而向 
对象 M —句（甚至有点滥 用）， 它对 
不同的人 T 能代表不同意忍__ —般 
而言， 面向对東私序设计 ( object - 


oriented pnjgrammtng , OOP ) 涉及以 
对象建土软件，就像你在 Youcuhe n 
date 特姓里用到 Date 吋象 3 

大多数程序设计师把“在秄序中广泛 
使用对象”和 OOP 联想在一起 a 至 
少在理论上，奐上的面向时彖程 
序 5 T 分稱成许多组彼此交互的对象 


集合，有些 S ? 向对象洗化主义者会 
说, JavaScript 并非够格的 OOP 语言 a 
仨你可以杞情力放在别的地方，不参 
与这类之争。争论的双方各执有 
根有椹的论 A 、 是后也不会出现真正 
的裊家 # 



S 糾惮 f 口 


或许一个签名就够了 囑 

在知道毎个博客 F 1 志实例的签名都一样圮，白然不甭赛 Lh 每个实例部 
有自己的签名持性 D Ruby 此时潘要类特性 （class property ) ， 这种特 
性只在戈里存仳一次，而不是釔制 I 午多副本到各个实例咀。 
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类特性也能共 f 

类特性 (Class property ) 与类拥 有的实 例方法 拫相似 + 它们都隶 
厲于类，只有单 一一 ■份 《 T 供所有实例访问„就 H : 些方间而言，龙 
特性对数据赵为明 lld T 因为这表示特性只宵一个值， E 为所有 
实例共卓^ Ruby 的 signature 恃性就是要 .4 找这种功能.因为笹 
个 YouCubo 陴客其实只有-个签 


M^E^ignature 特性存储在 Elog 类电 t 它却准济好彼任何实例访问 
U 要文例想汸问博客作者的签名 & 
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创逵自定义对象 


使闲 prototyped 建类对象 


讲 r 这么多类特性的存储地点以及知迠后仳来的广泛冲击，创迮釤响 
这么大的特性却怠外地世俗。亊宪上，只#一行代码就够 了： 




;ype-Sign 


Blog - prototype .signature = ■ Puzzler Ruby p ; 


光典戋扭 os 走 . Mi 

piOt0t^pg^\ ^ 


大衹窄人祥料 ^ 
杖 4 卩噠跫 璉乸的地方。 


类鞾 f * 鉍衿象得咢 
(丸碑 ） 攻祆问。 



復辑性 不必定 # w-i%^ r 
fs 戟 in g 事老知遂本例的 
0老蛋名向霉，辦兹 
ft 很佘瑁。 


关于上述范例代码圾冇趣的一点，在千你尤法一眼 r 解乜的意义 
—— ft 码井未出现在构造遇数内，不像创违实例对象的状况 e 构造函 


数用？为实例賦 f * 生命，因而疋法建*■.类别特性1不过 ， 类別特性必 



须在逮构人外违 


Blog P prototype 


黾扣付，沒为象的构！ 
弄袞外剖这. 和用柒 t 
ptotats ^ ^ 象的一电 a 


类特性 


供 笫一则 悻害0 
忘值 M 的咍 _ — 
汾备名 .. 


实例特性 


Pu2zler 


Ru.by 


\龙制紳 it . 4吋象的均 
V . 淺基教 f 鉍遘。 


S 个 0 (^ 卖例电有亡 
£ 的 ApJy 每 diitf 



笔上阵 


话写出用 Gfart 框呈现 signature 特性的代码 n 提示： 假设代码 
位于某个? slog 方法内* 
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.麼笔上阵解苔 



1^ =为什么会霑要把 YouCube 的 
签名存储在特性里？它不能当作日 
志的部分正文吗？ 

答： 当然有可柜杞签名放在日志 
的正文内容里、扠会浪 费不必 要的 
时间-与精神 n 肫设只有一个人在维 
妒咩左，当外面有这么干峥的签名 
处理方式， Ruby 终冗会对孜孜虼 
砣地为每则 EI 志签名感到及煩.，而 
且，谁说姥不会失手打错字，变 
成 ""Puzzled Ruby " ? 

月一个杈可行的选择方案.則是在 
冷日志加上 HTML 格式时，使用字 
许亊字面 f 制作签名 & 这喟方式的 
运作也 不错， T 过它把一段重要的 
ft 据 签名藏在博客的格成化 

代码中，不溶易寻找也不客岛维 栌。 
错由把晷名放在类特性见，签名较 
客易访叼，因而也较容易辨识及修 
改， 

R ^如果签名做成实例 時性， 对创 
建_则博客曰志将带来什么改变？ 


十網•嶋 

Af 有蠢剛 

还记碍吗？对豕的每个实例都 
拥有自己一組 在构遑 函数中做了初 
始化的实例特性？如莱签名改为实 

例特性. Slogu 构洗南数需在每个 
实例里设置这个特植，因为构遑轟 
数能设定特性为签名字符丰 ， 这样 
不至于遑成太严重的编鸪寐烦.但 
是' 在幕后特有很多个签名剧本. 
与实剜的故量一样多，真是浪费„ 
不仪如此，签名尖 例特蚀 还可能 fl 
己政变.完全影嗝不到其他签名祌 
性。 

J ®1 :所以说，如果我想修正 
YouGube , 让它支持多名博主时， 
我就可以把签名改为实例特性 n 罗？ 

^:是的，而且也是个很好的想 
法、 因为在多名博主共笔的情境中， 
signatu re 料枝有可能需要每个实 
例各存储不同的值 D 最伎处理方式 
大概是择加一个引教至 Blog () 构造 
渦数，尤许签名字符 争的传 入，然 
后使用字符争做 signatu re 莱例 
神性的初始化 u 换句语说，就是把 
signature 种性跟其他 Blog 实例 
特性一起处速。 


^ . 类特性似乎有点像全坶 变虽。 
它们如何分辨呢？ 

岑' 姜特性确实很像全局 t 童.两 
者均可亍几肀任何地方被访问。类 
特性的创建也与全功变董很涞，至 
少剖連的位置很像——位于其他哲 
序代码外的脚本层„类特性与全局 
变童的 差弄,在于它们与类的关联, 
因而也推及与买例对象的关联。也 
就是说，类特性的访问 一 文与 实刮 
有关 b 

： 暂停一下-类特性“必须”透 
过实例访问吗？ 

答：虽洗类特性使用 prototype 
对象刨建.井錯此存储在4中，出 
它们还是必领进过实倒被访问.、所 
a t 类特性的访 H 方式就像实洌特 
性，也要悛用关键字: .his 和吋象 
符号（点号 ） t 差异其实在于，特 
性的存铋地点在类中（类特 _ f ±) 或 
在臬个实例！（实例特枝） £ 
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创建自定文对象 


签名 m 传逮完竽 



^初始化片准济派上用场巧， Rub ^ 
我们问头得苕为陣客 H 志加」::格式， 
HTML U //法就是签名加人 __m 志対 


方4 e 匆吾； g o 
知的_砟分 t 


funct ion (higli light)( 


// l hti foe jnaLL^d bloq E1TWL code 


托 t 刮訝 i 


在 Blc ^ 类 f _ 加人类特忭 siqflatiire 
对她处藥耍的是，她为 VonCi.be 
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实例特性与类特性 


» 糠帝话 



多晚主题：实例特性与类特性讨论数据的拥有权 
与秘密社团 


实例 特性： 

原采你就是我砬近一迕听说的那个人。老实说， 
我不知道你为什么要出现 在这 型。我 C 绰非常报 
it u _ 对象文例独一无二，并保持追踪它 m 备行的 
犄性侪了 B 


类 特性: 


我完全相信，而且你的敬业褙神也很值得钕渑。 
不过，你知迸实例有时想省下保存@己数据的睬 
烦吗？ 


栈不相倍……你继续阱…… 冇时候 T 某块数据对所冇实例而言都一样，冇点 

像婭秘密社印的秘密握手信号，每个社团成员都 
知道秘密捏麥,但只有社团内才知道这件事^如 
果有谁发明 fSd 的捤手方式 T 将使一切位号骷 
SU 其 他成贤 也必须自行发明新的挹手佶以 
凌阿原本的方式，很快地 T 没冇人记得原本的秘 
密捉手，社闭里出现太多秘密 T d 

你的意思是，我不是个存储秘密揾芋的敁佳方式 
吗？ 


我憧了。那密码呢？我可以存储密码叫？ 


没错 》 彳 K 我可没有晋犯的葸思喔 h 只是在这个例 
子里，虽然征个秘密计闭成员都盖耍知道搌 T - 方 
式，但他们全拃 H 需婴一种方式。 


太棹了丨 我们赶 快开始分工合作吧！我马 t 开办 
一个秘密社团，然后你和我各设定一组密码。 


成许叶 以。如果钿个人邯有有己的 1 私人的密 d 
答案就是“可以"，此时你将作常适介存储密码。 


4是你又不知迠共通的秘密振 T - 方人……这部分 
交给我吧! 


太好 n 到底是什么秘密捤 t ， 方式？ 我奸想知逍 
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复制代码綫对是坏预兆 


釗建自定文对象 


f ]t>y 乂綫 ㈣ 厂从褚軒现_紐，她决定 
㈣ 光放得更远 t 再改良 YouCube 代娜 j 神她 

发现- ㈣ 細日脑跳 ㈣ ， ■ 认贴些 部分可 
以巧妙地利用 OOP 原则闹削减 j 




// Ketum a fit ring representat ion ot the blog entry 

BLog,prototype-togjjang ■ imwir innO i _ 

repJ Fn n fn_,j. ^his.datB-qgtM QiriiTiO + H ^ n / H ^ th 
/this-dat e.get Full Year H + f. hi body ； ~™" 


幻把唂式化代砝一接 


H Return a formatted HTML represertat ion of the blog ^.ntry 
Blag.prototype.LoHTML - fyn,ctionfhighUghi：) { 

// a gray background as a highliglit, : f spaci f ierf 
V£ir blogHTML = "■; 

blogKTKL += highlight ? *-：p style^backg ro K J nd-coIor ； ^EEBKER> 


该如付利減 YonCuhi 
的 G 期樁式化代码呢？ 
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何处用格式化 


13期格式化方法 


RubylS ， 解决 tkbl 期格式化代码的恰当方案，訧是在 Slog 对象 
M 增加一个 H 期格式化方法 ■> 为 fft 码的利用 T R 期格武化的设 
计必须 放人函钕戒方法。她或许会选择；/法，因为 FUog 对象负贵为 I I 
期加 h . M ^, 汴制 成陴客 LI 志的一邡分。地应该这样做叫？ 



回到 prototype 对象 

利用原本存在的对免并 u : 它们更加#龙 t 你能想到史为强大的力焉: 
H1 确实冇办法调钴标准对象，而辻述是扩展 JavaS ^ ipl 语言的终极选 
项》 "IT 展知准对象或任何 〗 avLiSeripU.J ■象的尖键 T 都足 prototype 对 
象 c 我们6■经使用 prototype 对象力 '’ J }4 过厲 I 1 Elog 类的特性和 
方法，也能采用相冋方式扩堠内況的 hvaScrirn 类，没人能 阻止我 们. 
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创建自定义对象 


扩展标准对象 

扩戚对象的关键就是 pi’oLuty p.e 对象，毎个 JavaScript 对象 1 ti 都 ff ^ n •所 
以，扩展对象，只盅要把持性和方法加人它的 prototype 对象驭，惜 
以迮6类特性和类拥有的方法 - 存:内！ JavaScript 对象的怙况屮，把恃性 
和 方法新增到 prot otype 象里，即丧示 fE 何由内逋对象制造的新实例 T 
均 "『 UjH 我 ffl 0定义約特性和 t 法， 


prototype 对象能扩 
展沟簠 JavaScript 对 

象 o 


String 



把方法加入内置对 
象的原型，即是把 
方法加入对象类. 


由类创建的新对象即可用 
这些方法。 


// Ret II rn Bcrambled string *£, ：'A ■&'> 達 45*t 【 叫的 

pjQtrttsrpe < 象的威赛 


契使用新的 string 方法 t 只需在 SUing 对象的实例里调用方法即芎| 




Li* ... Lr. j 






谪为 shortFormat ㈠ 方 法设计代码， 它是标准 Date 对象的扩 
m , 负责设定曰期格式为 MM / DD / vvyy 。 
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磨笔上阵解答 


奶答 


请为 shn Format U 方法设计代码，它是标准 Date 对象的扩 
展，负资设定日期格式为 MM / Dsvywy 。 


ii 个方 法波灸 
入 OiEa 时攀的 


/ Pate prototype jhortFormat ^ funellonO { 

r _■■_ _i_ii ini, ■ ■ I ■ ■ a I a'l； ■■- ■■■Bial.jtJfciuial.BLJijfaji 


reiurn ( thU . getManthi ) + \] * V J + this . getPat ^} + '7" + l - bis ^^ tFuJIYearl ); 



自定义的 Date 对象 〖t YmiCube 更有效串， rfif 且扩展了内宽对象的功 
能, YouCuN 也更容易维护 T 因为 B 期格式1>了只「单-位罟修改, 
但 W 时彩响整个陴荠的 H 期外观 。 当然， OOP 对脚+的改赵 M 不见得 
总能立刻看到改良的魔雾蒸睥 ifi 〗 起.但通常能在代码层发生作用，而 
Rfc 期下来运作得赵好。 
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钊建自定义对象 


类能布食 B 的方法 


类方法为类所埔 


fV4L^^j short Formal) (浪城 f Dane 对象 > , 钻个类拥有的实 布 ， ® K 能访问类 

例方法 (clussi-o'iviied insluncc method) T 京思处说， M 然它域 T. 发 ，^ 

能访问实例特件4 因此 ，方法才能为存储 /K 实 例里的 11 期数据加上格 特性。 

A , 另外， 也4 以创 it 类方法 { class method ) ——4 类所冇侃 无法汸 
问灾例特 fi ■:的打沾 n 不过.例如汸闷 si 奘的 


Sri g nat ur e ^^4« 


Blog 



m ialt 
of »l««al 


進方 46 闷类神 

ti. 


BJog 






类 // 法的创建 + 是力 类设定 方法，卅不使用 prototype 对象一 仅 
陡川 类名和对象符号《点号）把方法指派给类， 


Blog.showSigna.tur« = funnt ion( 5 { 

alert ("This blog created by " + Blog.pEototype, & i-0nature + 



^ 5 M ft jj f 去 冒汰问 
t 和 你必通 下垸至 
punohp •猝今 v 



)； 


疼; ^ sj>nntu*e ■& 个走辑 
、作, 究利方沾句 W 访网 


既然类方法4实例没有关联 . 调用时只需引用类名,但是实例并非不 
能调用炎:方法，只是忠要透过类名， 


b log. shovSig na.t ur e (h 
a 的关 m ， 


卷劝舰 - 

在 YotiCube S . , 你能想出任何追合作为 Blog 类方 
法的代冯吗？ 
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回到 B〖og 类 


类方法陡 ffi 在博窖0志棑 
咚齣 et 较奋&上码？ 



r 0㈣ srzm 


公⑽ V 2 C^I .. 

Attended 9 nlty eirtiWeofilM* 11 ^ Jtw¥tlwT 
ppuUsrin^ 咖呼加. 


itoi 


WettraNiid wri snfared the wary h7x7 

Sfsrtfjigfl iwenf^l 棚邮轴 refl_tM fo pmjsir^ 



重新思考博客排序机制 

这个 [ i 意确实激起我们的奸奇心,毕竞排序比较闲数对 Blog 对象而 
言，绝对 占有卄 常特殊的地位 。 丨 I 前.这个碘数创让 . X^howElogU 泊 
数 1 H 的一个函数字面量， showSlogi ) 也是需要排 j ㈣ L 制出现的地方_ 


璋客的#〖44 
^ to^Q 丢发泠 —— 

的—邱分 .. 


f unct ion showBlog (nutr.Ent r ies) { 

// First sort the blog in reverse chronologlea1 order (most recent first) 
blog. sort (f unction {blog 1, blog2) { return blog2,date - blogl.date ； }}； 

■ JJ 威许找把斟埤味炫代这蜱料类古 


} 




OOP 的基础概念之- 1 把对象的功能封装 ( encapsulate ) 至对象电、 
犮示外部代蚂不应该负贵对象本身 4 fl 责的工怍。就不例而言，比较 
博客 U 志以利排序可在对象里处理 T 而不川另外做一个 showsiod ) 
_数。位是，排序比较代码能放在 Slog 类的类方法 M 吗？为 fp ! 答 
这个问题.我们必须 知道方 法是否需要汸问呔倒.数据 或厶法 s 因为类 
方法无法访问实例的任何资源，这是个太问题。 
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创建自定义对象 


检验棑序比餃函数 


想知道类方法是否可行的唯一方式，就是柝解函数件理解史的运作 6 
下面列出排序比较函数字面 ft; 

洛个诨睿食刮 if i*f 赛 
人基數： 



funct ion{blogl f blog2Ji { 

return blog2 B date - blogl-date? 



涕埤 efc 校机軔章涉糾采 
个免变謇的成法 , 


虽然函数直接处琿博客实例 + 佾它们是以白变 S 的形式被 f 专人函 
数。 u 使用 ft 变逮 M 与试 m “ 利用 this 而访问灾例内部的特性和方 




法"苻所不同，类方法无法达成后者。所以，排序比较函数不鸽访 n 
实例中的任何丰物 T 它是类函数的最佳候选者， 

車实上，排序比较函数甚至不需要类特性 t M 然它在必需 时芎 以访问， 
因为类方法确实有权访问类特性。 


烫古法梂子必 * 时#问炎抹乸。 


如《汫4比歧毐盘戆龙祐问罢个 
丈剞.狀7軲迮它袅个泼方沾 


埘4比权 s 教不 雳泛兩 
貧例或走的 赵哀了 _ 


屬笔上晬 

■V 



重新没计 YouCube 的悄典排序比较函数，把它改为 Blog 对象的 
类方法并命名为 blogsorter „ 
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磨笔上阵解答 


磨笔上阵 


重新设计 VouCub ^ 的博客排序比较函数，埤它改为 Blog 对象的 
类方法并命名为 tologSorter (}, 


Floa . bloaSorter ^ fimetloHlblogl falog 2 ) ^ 

■ b ■ a ■ rn a k J ■ ■ ■ L a bjlj 騵 ■ a t ■ ■■ j d b ■ ■ i • ■ j l j iH. m ■■ h b j. T i. a i. d l j 


rtturn bkqj! r dsift ■； bla^l.dafe; 


斯 4 Ot It 泠 4 现在泉 0 /q 的 ft 的蛊马 @£名 
f6 6t^SotttiO . 


调用类方法 


把博客的排序比较函数移作 Blog 方法后，变捍较容易 卷出程 序代码 
何时调用方法 


稱窖典埤的如苷琛4杯 H 
给叫 «0遣方法(属子 


上述程序代码的优美之处非常细致，但非常重要 6 showBlogO 函数 
不再筘黄担心博客 U 志排序的问题《关子博客如何排序的细节，都交 
由（逻辑所属的） slog 对象内部处理。 


function showBlog ( numEntries .)( 


它的整洁灵巧之处，在于排序讧务一样在 Blog 类外由 showBlog () 
函数起始。这很合理，因为排汴会影响所有博客口志实伊 h 但关干 
排序如何针对毎則 R 志执行的细节，則是 Blog 类可以处理的范畴, 
优秀的 OOP 设 U _ 通常关系到小心地架构对象与它周遭的坏堍代码 


shQwBl«g() 


審耵 S 喊涔 - 


(s umound i ng code ) c 


bl.6gi^ort tBlog^blogSonter ); 
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创建自定义对象 


—弗搀胜过 ft 方语 


Ruby 抟续为 f 带来的改以惑到兴杂，挝她也知道用户不见得能 
分享她的冉悦，因为到目前为止的 OOP 改良对子用户体骀并没苻多么 
我剧化的彩响。因此，她决定耍为博客加上…得到的改变！ 




Ruby ffiU : 缸甽 0 志支持阄像的选州.与口期和 U 忐主体一 fe 
早.现，闶为泮怍每则1^志都需# 阁像 ，所以阁像的选用是此处 
的里点。如此亦可避免 Id 前骂好的陆客 u 忐格式崩溃， 





该如何明整 You Cube ■的 Blog 对象以 
支持周像？ 
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图像就是一切 


拕穆儳整含至 YouCulie 

为 YouClube 两洱增加对图浼的支铸，奄涉到如何牾合图像至 Bioa H 
象，会^歩对象现有的运作方戍。由此#出两十铌劫这项设计 
的茕要问题： 

0 博客图像如何增加到 
YouCube 里，但又维持完全 
选用？ 


无论 I [専客 的罔像 如何存储，权们知道必终将放人 HTML 的 ding ) 砧 
签，才能呈现在 YouCube 的网页上， 

碌圯泛碑名穹符嫌虾巧 .a 4 喊搞 

< img src- n cube 777, png w /> 悻 is 碘 ， 


o 


什么是在 Blog 对象里存储 
博客图像的最佳方式 9 


从上例代码狞来.阁像之于博客只是一个字符串。5然， 这今 字符串 
敁后 引用到 图像在 M 站服务器上的存储位但鱿 slog 对象而 
圯就 U 是个宇符串 。 


就 Wog 对象 S 5 言 * © 
像 R 是个字符碜 。 



所以，閉像可以申.纯 3 作一个加人 FUog 对象的特性，它存储的数椐 
是卞符巾,就像 body 特性。 


Cobe 777 .png 


7 X 7 X 7 龙方 ff 译巧鏵 


Aoi [f ^ l mJ y 神作柏 4 
f| 噠 4 的承 f 的 
掌笏 t 
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选用的馎窖慘偽 


© 所以说， Blog 耐象把阁像芍成宇符中特性 itna 非而存储。但另-个 
问题述是存在：特性该如何制怍成博客的选川功能，我扪的 IVJ 题 M 后 
必定导回构造函数——创迚与初始化对象的地方，想必有些特殊代 
码能放在构造喊数 ih 特性4为选唞功能。 



当I个 E：1 变货未被 作给 岫数.//达成枸造函数时，在任 M 忒阐使蜊自 
变蛩值的代码甲_，它的值都是 null fl 尤其 在构造函数的例子中，这 
―点衣示: 与映少的0变扣对应的待性将被设为 null , 但不见得蛙 
坏书。 ikr ^ r - r 确认构造通数的可选自变说列在列表的垴后面，所 
以不填人可选自变置也不会造成其他自变置的困扰，这项技巧其实 
可应用作任何蚋数或方法上. 阳它特 别适用于 Blog U 构造喊数罜的 


imaged 变 S 。 




话革粕设计 yowCube 的 R ] 03_构造 
函数> 以支持存储博客图像的新 
特性 iTtiage 。 
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磨笔上阵解苔 




a 

1 in ^ !g?j i ^ W 


请 _ 新设计 YouCube 的 Blog 构造 函数， 以支持存储博客图像的 
姑特性 image. 

funciioh P!og(bcdy. dafeJwageM 亡 4 #(»i 中加 fj 相 

I - J B J m J a I. ia J. b .> d J. d i. J k_bd ■■ - ■■ - ■■ •■ I- ■• ^ ~ f m I- B t B 麗 ■■| 1 9| 1 9 『雪 | 1 霸變 111 國 11 鬵丨 _>1 麵 1 | 謂 11 嚙 0 1_11_ It ■ %i IB I d I B I. a ■ ^ I. d b_ m m W m.Tm ^ ^ 

PC. . 沒丑盘的亡定 f 扣 

// A^lgn fhe propgrtief 表尹 I 在玉 

1 * ■ fc ' - ■ *■ i 3 i si - i j t. mi I j t - > - - b « - - - ■ - ■ - — - f - •> - »■ - » - ■■- i- - p i r ■» p ■?! p i fipi r ■ e ■ n\r ■ 'iKr ■■■ m ■ ■ u ■ a ■ j ■纒 


thi^bady ^body; 



有蠢问热 


K ; image 自变里出现在巳 log (:■构 

造函数的自变里列表的最 后面， 这件 
事很虽要吗？ 

$ _是的 ，原因在于图涞被视为博 
宋曰志的选用功能 I 真正的重点在于 
自传给函故的方式 ，尤其在关于 
可选 I )变 f 的状况如果轟軚有岡 
个幻吏量，你的迄择将有：两个9变 
量都侉入，只传入第一个自变或两 
今自 t 责都不谇人。没办法只泠入第 
二个自 H 

在邐到可选自变責时，试屬把它们当 
成放厶自变 f 列表的尾蘇。也要试 
赉考量自 变量的 玄要性，枝 f 要的 
色定量先士现。蚊不重要的自变量比 
忮可能会被考虑赳为迄用功能 ，应 
该出现在 ij 变量列表的较后面。跃 
然 image 对 Blog () 是个 T 选自变量 i 
它必愤出现在 i ) 变:&列表的最后面， 
才能轻馬舍弃不写。 


为 YouCube 淥加 ©像 

如见没科农演的舞台， 支 m 电像的崭新 Blog () 构边函数也允川武之 
地口为了创建支持图像的博客日志.爲要办致两件丰; 


O 把陴客阁像义件放 
到4 You Cube MJ . cf ; 
和同的自承下（在 
网络服务器上）* 

0 创建新的博客9志, 




炸为 YouCu be 脚本 
里的 Blog 对象 c 
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完成这些亊项将形成如下代码，可成功地创建新博客3志 U 丘该 U 忐 
接受图浓字符串 t 作为传人 Blog () 的接后一个自变置： 


new Blog (" Wow , it took me a couple of weeks but the new cube is finally solved ! 1 


DaterO 3/19/2 G 0 S "). ) 




悻客®薄 it 涔琀识巧 0 的 
最后一个 t 变 I 。 


呈现博客图像 

陳客 U 志的创建加上图像后， YouCube 围像加强版还剌项工作 p 
我们做了这么多构造函数与可选自 变置的调整， 但还有呈现博客13志 
的代码 . 若未考忠到新加人的 image 特性，我们等干做了 天工， 

相关代码位于 tOHTMLf) 方法 , 我们 tL 经知道这个方法负贾把博客的 
格式转换为 HTML 代码，它现在只盅多考虑一 件丰： image 特性是否 
为有意义的值 t 实陈上将有两种呈现博客日志的方式，一种附有罔汝 , 
另一种没有，而图像的 # 在与否则决定日志采用的呈现方式 s 


傅菩0态座殯根 j | 佯 
代保的獅魬。 



If (lmag« oxlsfs]! 

Plapiiiy blog sntry with irn.g_ 
EIm 


•Display blog entry wltiiciut lmag_ 


<1*^ 上阵 


Blog 对象的 tOHTMLU 方法缺少一些代码，都是关于呈现选用 
图像的部分 & 诮补完缺少的部分并说明其用逄 a 


if ( . …………」 { 

blogHTML += n <st rong> H + this - date . shortFDriti^t (} + 

H </strongxbr /xtahl&xtrxtdximg src 二 1-1 +■ this*image + 

H Vx/tdxtd style-"vertical-alignstop 1 >" + this.body + ■ , </td></tr></table><em> H + 
this , signature + a </em-></p> n ； 

} 

else { 

blog HTML += n <st rong>' 1 十 c his .date - short For mat (I + n < /s t r ongxbr /> m + this, body + 
"<br /><Gm> n + this.signature + 
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磨笔上阵解苺 



Blog 对象的 tc ^ TML () 方法缺少一些代码 f 都是关于呈现选用 

囹像的部分。请补完缺少的部分并说明其用途。 

—- - 如菜绅伐说立錡 食贤® 体， H 象磚 

幻郎©乐 S 现®体。 


"<br /><em> T, + this^eigna：ture + ,t c/em></p>"^ 


Rtiby 此时雀跃不巳，吔的博客因为对免 [ fii 有跳跃性的改以，而 
且现在乂加1: 了用户想必與欢的 W 像功能。 
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创建自定义对象 

JavaScript 填字游戏 




横向提示： 

2 . 办己拥有数掂 1 有生命的对牟 E 
4. 刨述对象实例的运算符， 

6 - YoiiCube 的签名是种_ * 

9.使用对象设计的软件-称为_ . 

1 K 从对象合夯的毡序代码1用对象的关键字。 
32, 从其他对象绒承特_ 味和方 法的对彖。 


纵向 提示： 

L 对象里辛于函数的爭物 3 

3, YouCube 的博客排序比較代码是种_, 

5. 峑一块数抽放人对象里， 它被称为 1 

7. 每个对象都有爷__对象隐藏在它心里, 

心用于钊.建对象实洌的模板 n 

10. 用于访叼特和方去的对象 符号— 
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JavaScript 填宇游戏解签 



JavaScript 填字游只 
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创建自定义对象 



Page Bender 


请垂直对折本页，祺拟左 
右脑的区分，并解决我们 
提出的谜团。 * 


这4!右.抵的如密全谈 


对象为 脚本増 加太多禚玆的功能， 

很难单独挑出一项。 

没错，布些对象比其他 

对象的层次离，让我们的挑选 E 为©碓， 

不过最终答索应淡很硝袅。 
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11 除错务孕 





我永运相不请楚达些龙®。 前一夭 a 好站 

的.大皋相安疙拳， 才 Uk .. 辟 j 

突蚝阑 一 w 籾 n 七八错 v I 好， 达世幺来我 
们达种奇 n 碎瑰的入 p 


好脚本也会出错 


命 


即使最佳规划的 JavaScript 蓝图也可能出错，当这种情形发生，爭实上，定 

会发牛，你的1：作就是一■別惊 慌： _巖好的 JavaScript 开发人吊，不是从未造成 
杩序出错的人 这种人叫編子。敁好的 JavaScript 开发 人敁， 要能够成功猎捕 

并消灭自已制造的缺陷 （ bug ) D 述有，•-流的 JavaScripl 缺陷终结者也会发展出 
良好的编程习惯，使敁狡诈.嵌棘手的缺陷的出现率降到敁低。小心驶得万年船。 
但缺陷如果登舰了 T 你将需要提紧白动机枪，准备战斗 ■…- 「 
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mi 有缺陷! 

现实生活中的除虫大队 

点心此界面临 r 人冲 . 条巧克力最髙町以容纳 60 块 R 虫碎片! 

先不 箭这則花絮听起来多恐怖 T 我扪在〗 avaScript 叶界中不用吉怕岵 
也的出 现， JavaScripl 代码的拧制比巧克力处理设备严僅多了，芘乍 
还有单独移除 ■JavaScript 吳也(缺陷)的力 


BSXs 

BUG SCENE INVESTIGATORS 

Bug Scene Investigators (罪虫现场调丧小电）.在同业:_简称 BS 1+ Owen 
垃近刚加人 bsi . 专 Hhvas ^ ipt 调丧，他 if a 切地想证明自己的能力，件 
防 助万维 网摆脱 JwaScrifi 【缺陷 a 



Ow 加 . ss ^ 0^ il ' 

t 吊琢冬巧免力金 
好者 a 


他 U ) 要杜快处现儿个紧迫遥人 
的案 f ,熟悉 j av aS cripi 的除 
也黑 繳法，才能提升 fld 的职 
位，成 Xf 干炼的 JavaScript 探 


Owen 恕爬上成功的宝座， 



.崎清缺衫的巧电力咏 
-一# 



技窖新知 一 

根据美国食品及药物管 
理局的规定，每 条巧克 


力樺里最高均能冇60块 
昆虫“碎片"，与 1 ■现实生活” 
的状况相反， esi 小组成员对 
于 JavaScript 缺陷采取奄不容忍的 


政策，你也应该这样做, 
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除错务尽 


策件:昶満鉍陷的 IQ 计萁篛 

O 咖桌上的策-个案子是 『 Ql 卜算器 s 它越个_的一部分负赍 

娜 IQ 数射择乎均贿^肌上这个脚本会收到一个数字数组 ， ^ rJ ® 村的 f 4代接 g f _.// 

后计算数组平均埴并表示平均智商值^ ^ ' 

。 衫卜/ 下办， 

同糊已細 0_ i 井过，这个脚本的醜多如宇毛。很不幸地除 
r 1城， ， 社多信息 „ 


tl 3 


97 



r iqe ■= I 11% 9?, SI 乃， S3_ 105, 146 

77, §4, 114, 165, 96, 37, B &, 11^ 


之旮螂本 


whh people of a^eragG mteOis^^^ 


你的除错人生不见 
得总会拿到写得很 
好的程序代码 




Owen 想到 t 多在几种浏览器上运行问题睥 
本，或许有助于发现 M 题的蛛丝马迹。他先 
用 Internet Exp ! tire 『…… 


[ntemel Explorer 在网页首度栽人时汇报了错误信息,但 Owen 不 
魄定 是否吋以信任1报的错看一下代码，变明明存在， 
但 IE 浏览 3 S 说它不存在 # Owen 知道，浏览器在汇报错误时不 E 得 
准确.他决定換 Safari 试试. . 


a ‘ 〜/ aT1 典士钤抟#辛 
筠希 4弟耔诔没问遐： 


Safari 指出的错误与吧的完仝+在+同一0,而 Owen 现在也迚看 
不出 Safari 指出的这行有什么问题。所以他决定改用 Opera 尝试找 
出错误问题的位置…— 





除错务尽 


冇点訏怪。 Opera 提出的行数不间，但虱然与 Safari 指出的 H 题相 
同，这对 0 w en 倒是个好消息 t 不过 T 他吐是 看不出那一行代码的 
问题 a 所以他决定苒试另一种选择 T Firefo , …… 衫議副 


Wm <1 M 闲勘代 
-祥 h 



Error mining ( beVt »ndn>«^ ^~ 一 ' 

S*ynie Rk* /Uat-r^j Tiic hwlj Pot umffniil^tadifii'itictiiPttf 11 JcK*mci«/bia/ 1 

•Ih It AHra^B SO { 


FirefOK 


Error Coniolt 


*©e 


■ O 


caj 

Dren WlrninQS & 




JJliliri Un_ 14 


el .^ r Lf ^ 12 U r 


?liP if («^ rdge . ]ij,, 
j ' er，Jrr， ■ 时印 > w ver y _-vjp[Tid r 
*=■3 SB 


Snte ] J Lnc ^ nce " 
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借用手下浏览器的帮忙 + Owen 发现什么样的程序 
代码错误？ 




<bi 


加 tmti 咖崎 


ftl " yJact ^ _ iQ ., 


■•'di v > 


rej - Ucn 'q^riiij H?B . f 


以 hr * dd .' 



它是 R 鸟，它是架飞机……它是 火狐强 


Firefox 是#懑认为最好的调 


Firefox 伸出掇手 试浏 览器， 至少 © 前还是。 



^ f Firefos 详细的缺陷说明， Owen 决定使 

l B 所以他按下 Firefox 措误 
链接把他直接带到问题代码 


技窖新知 


P 


Firefox 不只具有极佳的内置缺陷栓测能力.它 
也有凋试器 （ debugger ) 搢件 Firebug ^ 把 
调试工怍带到完全不同的层次* Arefox 的 
Firebug 调试器可于 ^ WpV / www . getftrebug . com 免 

费下载 e 


^ •叶 merusl^^flna^jujrpl*^ Chapel l/bfl/ct. , 


< hpad > 

*tltlo^DSl VaaG 


. 4 ^ 


它强调的地方却是奶 25 行。更梁吳的一点1 Firefox 解抒 ^ 

了程序代码究竞有什么 N 题‘本例的问题说然^价，却很 d 讁匀的 f 礴刑试负 ® 4 鉍睪 


容易众 iU 洋它千纣度， ji 是颟掉「 B 
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有置岡览 


我不知道要怎么打开浏览器的错误控制台耶。该 
怎么打开它呢？ 

^ : 很▼惜、每家釗 E 器的作 JHI 都 T 一样，有些甚 
至很堆找到 JavaScript 错.设控 iH 台 .. 例 h 说 Mac 版 
Safari . 它只元许从 Debug 菜单访问错误控|彳 台， 担 
这个箪单默认为关闷的 D 你必颅在 Terminal 应用尨序 
里执行下列命令（命令的榆入需为一疔，不加回车符 
[carrtage reEuni ] ) ^ 以开名 Debug 菜■达： 

dpfaul ts write coni,app 1 e . Safari 

IncXu^eJDebugMenu 1 

请参考你.所使用的浏也器说明丈档.了鲆该如何开 
启错误抬制台以及如何查着脚本招误 a Fire fox 的错 
说椬制台，可以 '工具 u ( Tool ) - “蜡误椬制台” 
(Error Console ) 打开。 

:为什么 Pi refox 如此特别？ 


FirL ：! ox 的众多开犮者为它的错谈汇投姐力倣了 
相当好的货献< 讲釗评估脚本错误,.它就是比其他測 
吃器表现得 t 好， 而且 能指以 正确的错误寻找方向 u 
道未未是否将出现起越 Fi _「 e_fo x 的刮 也器调试功 
能，但 Firefox 已证明 i | 已非常遠合士除闷页 W 木叉所 
包含的缺陷 B 

问：那 internet Explorer 讲的错误又是什么呢 5 

^ :其夹没办法百分之百地确定„ m ^3 Internel 
Rjtplorer 汇报的错误必定关于脚本木這当地栽 
入，这是 JavaScript 料释器遇到错误的蛄果 n 为什 
幺知道脚本未适基地栽入？因为它汇报 1 qs 木定义 
( undefined ) ,虽然代碼明明就見创建7 变 I igs „ 所 
以它成为冏題的唯一成因，： C 是有什么乃蚩阻止脚本 
完整栽入 n 

由此也出万一个问題……脚本圼还有其他错误吗？ 

^未 定义" 的真正意义又是什么？ 


在轻松街道上除虫 

这么快就找出 IQ Lt 兑跦 W 本的映陷， Owen 沁此卡 舞迢蹈、 

支。而 R . 这个宠子的代码修 lE 工作乂很尚电，他想，耍在 T _ 作上达到 
最高效能,普升 BSI 探长已经指 R 母待了 • 




else if (averacse < 50 ) 



挹 备蜱划 茂乂入^卑寺 ■ 
^ JQ 科 S 君的试喵 


；加上缺少的括号， 

!消灭 缺 P 6 f o 训会不会太过自仿呢？他在 h 班溜号 n 域 

好 te 査一下刚銪理 h 始脚本 …… 
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这里发生 T 什么事？ 


汇报的紱陷不见得都是错误之源 


根不幸. Owen 的 IQ 计算器案件尚未结束，因为 Firefox 还在抱怨，但 


这次抱迮》斗: w 的卩」 m 他虽然想维持晌面的诹略， a 接 u 
fr Firefox 的评估，但 Owen 这次开始疑缺陷 C 报的合格度 i\ 


fiWciif 域的基.故< 
担考〔|> SQ 成的也 
^ j . tfi 以典来钻士 



你不能无条件地相信浏览器 D 

没错 f 函数的大栝4役冇问题„里然在足咹状况下的灰现述不锚， 
■m Firefox 面对这只缺陷时搞错对象 f D 不过，消失的大括号仍然是 
条线索， 违汶你仔细研究代码中的每个大 恬号。 
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鸟 JavaScript 辭释器天人含 一 

你讲扮演 JavaScript 稃研 代铒 

中的六 括罟， 从拽出闲瞄 所在。 

<html> 

<bead> 

ct£^l#>BSI Cam^ 1 e 10 CaIouI < /'tide 

vmc 1?b » L 113, 打 f 66,32, I0S, ” ， M, 114 H 1C5, 打， 0S, U 

fuAftiofi ehowlQClaas<data) { 

alArt ("Click, OK to begljn IQ calculation. - 3 r 

dogitfPgcat -gEtElKTrLmt-Byldi j H oiiC.pUfc . 11 } h l-dQ felt HTML = " YOU. ajf e- de&liliig with ^eaj» " + 

GnlclQClsa B 《点 &te3i * „ m t 

} 

fuTicticm c^JdTQClaiafl tajitft}( 

H CnlculAtfl thm 10 

var Average ■ 01 

for (vax i = O 1 ? I < datii ■ lesigtli ， i + + l ( 

^aVfirJige +■= data (11; 

QLwrage m Hjic,h, f loaf (average / data. length^ ; 

J / n«t-u m thm q lava £ f IdAic ion of the average IQ 
±£ (average < 20) < 

retujcn "people wtio should kill tlaoir t-^a H j 

) 

eleck if (average c 50]( 

return ’people who ■femclci really* hit ttie iDooka" 1 j 

) 

«1bh if (< 70}( 

roturt^ wb€> abould hit th« boakp h ; 

) 

©iBfl if (n-varag C SI}( 

return "p^qiplia vha nbeiuld eMfllder brain exe>rciB«0" ? 

J 

•elae if (average < 91) { 

f«tUiFxi "people who c^mld b« c-onaider'frd du 11 H j 

I 

elfifl if (p.ir^*gii5 <111) { 

i-*t\irn n p9Q|pl，fif m ■ 龜亡 iiktellisieii'Ce" ^ 

} 

clBC ； il! (average! < 121 > ( 

r«tu£ti "people of bu; parlor intvlll^ftnce■ j 

} 

mlmm if [*v*rage < nil* i 

FatuTii "people of very superior Intelligvnc^ 4 a 

J 

else ( 

return -gwniu 嗶 *3 邐 - ? 

1 

J 

<y*crlpt> 

</he«d> 

<lsody ■oDlomdaHsowIOClAM (j ■> 

■€jj»g src*"br*inrpng■ Alt-"Tarai b w /> 

<b£ /> 

<div ids n output■ >Ready to qaleiilabe the average 
■</bod.yj 
</html> 
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天人合 一 te 笞 



加上缺少的 
大括号，消 
灭缺陷！ 


鉍少威匆的铐 I 


® 个寸疗 . c . _主 h _ 

核榷疗-的起碚 <H 
寻 . S « < H ^ 

%澡衅口 T 运8栌代级 


ss If ?avGrag < ai>f ( J • --- — ■ —— — ~- 

return "people who afioiLld conaider bnain exerclaes 


494 第 11 章 



除错务尽 


変量丰定夂 


吳虫 一 只接一只出现， Oweri 连淖下来喘口气的时问部没有„现 
在， Firefoxl : 报有个“末定义的” (uot defined ) 变 S , 听起来很像 
ImemetExpbrcr 稍早汇报的 错误， 仉造，这次的未定义变软不 ^ iqs ， 


汴罨. 革二对传镨3 径^廷 
7。有吋辞，卟 i — 个鲈尨碎 
t 嫌蟪不士獬决一砩持 d 



笔上阵 




未 定义的 


请根据 Owen 案件调查悄堍中的 崧后一 只臭虫 T 写下你对 
1 未定义 &T 的看法 ■> 


el&e if i averag < 615 { 

r et urn "people who should con aider bra in exercises - i 


GrTvr Como l« 


而是 averag. 
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检査你的工作 



答 


请根据 Owen 案件调杳愐塊中的最后一只央虫 > 写下你对"未 
定义的 H 的宥法。 


■表 t 史的"圣雎来 < f €^) 髟澧的 i.S . 成圣蟬 & ji 7 ,郎禾#矣佬的企 

#'o ' '£ i !'' Ti \ m ' iii ^%^ ii r [ . . . . 


averag ^ t |^ rs ^ K ^ 

赛 


R«4y to cakuXms ibc avenge jq. 


Okh 0(tO bf^ifk IQ calculation “ 


/ JW 

.I 晒 iif . 


像打错字达种简単 
问超，遏常能造绂 
脚本的大洁劫^ 


竹 t 打箝的4 署名枋 . 蘇;夫 
51耒宏义栌柯板 


if 彳 average < fsi i 


return ■ T>ec>pie who snoiiId consider 


Drain ex^rciSCG 


eoa 




p Cim 1QC*kulat«f 


r^pl 


— ，- J i^p . 

erag 


averag 


出错的地方布时候很简萆 


在这个案件里， " 未定义的" ( undefined ) 表示使用了未经创途的 
企 H 虽然它是个盘外，变欲未定义的唯一现由，其夾是打措字 ，造 
成 JavaScript 解释器认为遇到了仝新的变设， 
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有蠢问猫 


餘错务尽 


辟 r H 并未定义的 81 与 w 未定义 
的 n ( undefined ) 有什么不同码？ 

^ ；没有。它们表示相同意义，只 
是茱些浏览器爱用杲个詞^有些则 
愛用5—个巧而匕 B 清把这两个句 
视为可完全互相交换 3 

I ®* :好的，那么“未定义的 H 与 

null 有什么不同吗？ 

^ :这个问题比蚊值坪注意。是 
的，在非常技本的层面， 14 未定义 
的 51 与 null 磷实有些1异，但疋 
不到 t 要担心的程度„ 44 未定义的” 

不像 null , 你甚至不用考虑把它抽 
紙给变 ■#：= 有个 undefined 数据类 
型，几是未被指派值的变即& 
动假设为这个4贺，另一方闳，变 
量从来不会被自动设为 mj ] l a 然而 T 
有时若在初始化步騄时设定吋象变 
曼为 null , T 用于碥保对象于尚未 
刻建前保持干净。 


先不管杖心的技木初节，关于 
"禾定 义的” 与 n u 1 1的差 别：它 
们在 boolean 上下丈中都被转换为 

false , 例如 : i f 语句的激_!试务件里 
所以本 " i.f ( someObject：) 这类: f| 序 
代码 T 常先用于检查对象犮否创建， 
再试 S 访冏对象的成负。 

I 句：我还是不太了解 M n 错字 。 
( typo ) 为什么会把 average 变成 
未定义的变贵 a 究竟 M 怎么一回事？ 

^ ^茧然钊建并初姑化的变龙的名 
称是 average ， JavaScHpt 并无法 
因为名称几乎一样 T 就把 aver ag 
和 average 联想在一起。对 
JavaScript 而言，史量 averag 也可 
能 j ^ ishdzbcit 或 lederhosen 。 4 k 
的意忍是说， JavaScript 解释器杞它 
視为仝新的变量„既然这个斬变量 
未被指 派值， 想在 if 语句里比敁它 
的值 I 当然就是个太问题了。就像 


在決定看哪部电衫 前， 就先下笔写 
电影评论一徉， 

^ =你不是说真的吧？我每次用 
文宇处理软件都不知 道打了 多少个 
错字，但它都不会有事，为什么 
JavaScript 这么敏感？ 

答:请先涿呼吸 T 然后杷这一段 
重要而庄经典的名 t 刻人你的轱海 
里 t “习惯就好。 " 我们并非褀写 
给其他人类看的脚本，而无论你使 
用何种诰言编写脚本，机器完全不 
浼待何为，即使只有一个 
字苻放在错误的地方，都可能杞整 
份脚耒逼入絶境 q 对于 JavaScript 代 
妈碑后空白 <例知玄格 [ space 〕 和 
换行 [ newline ] >的相:关规定逐其 
有 A it 性，但代码本身則必烦非常 
精确， 


i 十篝智商 


控制 f 打错 字的缺 陷后， IQ ii 算脚本现在正常运作了，它能根数组列计算 f ■均〖(？, 
而后表; r< 智力等级的文字佶息 ■» Owen 结束了 •件窠子，沐浴在完成工作的喜悦中 
…一但爯悦能维持多久？ 



修复了变嫌名 
称打错字的问 
翘，消灭缺 
陷！ 
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马上拨打马上哀 



■ m 然大多数湖览器都提供/错误控制台 { 记 ■ 圈起代码块的大括号，是 个常见 的缺陷起塬 —— a 
录 JavaScript 的错 误}, 位汴非完全准确.你不能 小心,务必确汄起始与结/€栝号成对出 ？ L 

■ 大家邰常犯阇节的打宇错误 . 但不见得很容易找出 

■ S 然浏览 E 通常产生不完全的错误信息，但通常那 來^—话务必检奋标识符的茗称。 

会提供寻找问题的线索= 八 八 


Owen 还在为 f 结束第一个案件而庆祝，下个案件4上钬出现在他 
的桌^他的新案件是一个处理电台直播来电竞杏的鞞本 T 根据来 
电顺序决定砬家，这份_本应泫一沉计泣来电人数.并在来电到达 
一定数设时（本例为访7通电诏> 宣布瓶京 a 


轮歉.你 as 罟 


4 da 第11華 


开始调查 


除错务尽 


运作 a .的错误.至少也可以 了解 代码应该如何 


来《又的绔名裊宗 
序吾（州 twj* s 他…还 

入 A-Ck ㈧ 丢盎 



^ T ; *«衫0方法诅金霣页犬#的翰入 

« E « t (> 方泌逸择存餳在立本无柰 
W 执依， 


c ^eciiWinn^f() 
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是什么？语法错误 



语法验证问翘 (» ug # 1) 浯法错误总是由 


对埕序代码应有的运作方式有概念后.现在该打开|看 浏 E 器秒汇猫， 

电台直播籴电脚本的实陈运作状况了+与我 们看过 的其他错误相 

似， Fkef ⑽立刻 fr : 报了语法错误 uynt ^^ Tot ) , 这是种违反 r 假 设开 J § 3 >Cm 


lavaKcript 语言规则的编程错误 & 


功能。 



/， 

HM' 


语法错误多半引发浏览器的某种通知，假如用户开启了浏览 ss 


的 r 报功能 n 对于追踪错误，这点是个非常至:要的强心剂。 
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除错务尽 


小心处理 字符串 

Firefox 指向一行具有卞符串相连的 代码， 这个线索告诉我们小心检 
査这一行。代码中调 W alert (丨函数 T 其中有好几个字符并 
与 caller. callMum 变 ;it 相连 e 


if (callNum = winningNum ) 


alert : (cdller + 




call Mum, + 


sue . 


r 这并个 ？ q 聲字面采个 

- 



在 JavaScript 代码中，引号成对出现非常地重要, 

引4必须均为成对出视，否则 JavaScnpt 疋法分辨字符串的结束$下 
个宇符$的升始 # 在电台直播来电代码的案件屯，字符串相连运兗的 
其中■个字符串字面1缺少结尾的如此造成 JavaScript 搞不沽 
楚字串的结束， _ d _ 分之 W 址个语祛错误 ■> 


if {caliNum = winningNuin} 

alert {cal l*a-r 4 11 # caller niimbe 

if (callMum ^ winningNum) 

alert (caller + " „ caller number H + callNum + 11 ■■曜 today 1 b winner! " )■; 

I 修复字符串的 
I 引号问题 ，消 
I 灭缺陷！ 



rQJli callNum +- p - today ’s winner! ") f 
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一致性的重要 


引罟、撇吾，还布一致性 


缺少的引号只是字符串中的 U 号相关错误的一半，因为 
JavaScript 与 HTML 均支持引号 （ tt ) 和撇号 ㈠ T 但分别用于包围 
字符串 ( JavaScript ) 和属性 ( HTML ) ,所以在滟用两者时,务必注 


意一致性 a 

< input type= H button" v*Xue='C<sll' 


HTML ■域性使用号，厲性电的 JavaScripl 卞符串 _ 使用撇号 + 这个 
方法运作得很完关，而月，延令好主意。不过，也可以在 HTML 中反转 
两个符号的用途，如下所示 I 

< input cype= f but ton' value= J Cal ' 


以舂用今 ® 
t HTML 應性。 


l cdi 丄丄 er 



轚咢角令 ® 45 # ^ f 


现在的 xHi ^ t 荈由籽.兮; r ■允荇 


onelick- 1 checkw inner( this. for^i, document -getElemontBy Id( h calier").value. 



HTMt 厲作现苻使用撇 



7 V 


/> 


这见的麽点在于确定弓〗号都用干¥语言，撇皆都用干乙语 a * 既然现 
在的 HTMU XHTML 都#求以引号闱起 厲性, 廚以 M 怍用 U 号，属 
性里的 Ja ^ Script 字符屮則圯撇号，也很合理。 


在 HTML 厲性中用 
M JavaScript 字符苺 

对.引吾鸟撇吾瘅该 


但是.在你突然特别需要弓 I 号 g 榭号，偏偏又巳把其中一项用干围起 交管运闲 
字符串时（义称字符串边界 〔 bflumhiry ]) ，问题就出现了。请看下 
例： 


alert { > It ■ s 


so excitingi ' 

^ - 达踉代 ti 钺逢作 喝: 


稱叻咖 3 - 

岜你的宇孖串特別需要弓 I 号或_号字符，但已 
经用相同字符围起字符串时，会发生什么箏？ 
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除错务尽 


当引 t 不是引罟，便用转义符 

在丰符串里使 mu 号与撇号字符，而不是把它们解秆为宇符串边界，这是个常见错 
H 所以我们刚才卷到的 jiteri 框代码具有语法错误， JavaScdpi 解释器无法分辨出 
哪个撇 ㊁ 逊字符串边界 t 哪个乂该3成撇号卞符不身. 幸好. 冇个卢明字符 是个真 
正字符的便利方式一一转义符 (escape character ) , 加卜 ，反斜线（\>从而把它后 
面的丰符实际视为幸符原本的意义， 

alert ( ' It \ + S3 so exci t ing t p ); 

转义符®在孪符每中 

转換撇号为字面 S 后，： JavaScript 即可亳无疑虑地知道我 ffl 想把撇号 ^ ^ 

放在字符串里*而不是圮冈隔卞符的边界。当然，我们可以改变这 表不梁标子符 0 

里的 卞符串 边界为1号，以免出到转义符。 


alert("It 1 


5 SO 


excitingL")? 


SH iLS 


样可行，但如果遇到下例的情况呢? 


a 1 ert { * They sa id r "you've won 1 ,!,! ) ； 


字符串包含 u 号与撇兮字面货 + 所以只能利用的义符。在这种怙境屮， 
转换卞符的盘义通常比较安全，虽然此例的撇兮不需转义 & 


alert{"They said r \ "you\ 1 ve woni\) 


不電 矜义 ， ㈣ 
&个抖 i *. 



修正下列代码片段中的引号与 It 号、于需要时使用转义符。 

var message - 1 Hey , she’s the winner! 1 ; 

var response - ^She said„ " 1 can't believe i wt>n. 


< input type-'but ton' value^'" Winner" oncl. i.ck = ,r 'g i vePr Lxe ( "Ruby" ) | n 
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习 M 解苔 


&教的 





解决 if 一只缺陷，但 Owen 的工作尚末结束。电合迕播来电啷本刚开 
始没冇错以传出，但只要输人來电人姓忠 h 按下 " Ciiir 按钮后，立 
刻出现另一个问题。这个问粗似乎与 checks nner () 函数有关。 


来定义不 H 是耷量的专利 (Pug 


您均；喹凍因. 


此 ftj 先法 am 矜 义符, ©銬它晷一个放在 
HTML ^ f S \) ^ a ^ iSc^pC 穹帮等 ^ 5分#1 考 务激 
卑的 fl 用.昨丐鹆嬈 h 剜约兩盎. 




挺甚 不必 

HH . © 

婷 达出坨 - 

(5 起的字 
努華 f ., 


修正下列代码片段中的引号与撇号，于黑要时使用转义符。 


var message = 1 Hey,, she 1 & the winner : ¥ 

yar me^sag e= Hey^ she Vs the win ierr； _ 


var response = "She said, "I can 1 1 believe I won."" 

y ^ rmpon ^^ H Sh & 科冰. \1 k ( ij ? 作 i .洲 iv \ ■:” . .. 


input type:" but ton _ value= , Winner - onclidc= s -give^s：ize ("Ruty") 


< inputtvpe= <, t f utii?n :， value」 1 Winner” ondick= ai^PHzef'RuW )： : /> 



p ^fy 

tflt 
相 I 



下子 # 
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除诘务尽 



r 水成对戎缺少 t 去 
表成 M A 故少了大 
* 冯为字而使标 

t 1 吴号或梯号 


OiMfen t ^) '^ 

ffif # ^ '> 


□ 来成对或缺少了大栝号, 


□ 未成对或缺少 r 括号。 


□ 因为打排字而使只符命名错误 


□ 误用引号或撇号, 


□全新的问题类聖, 


嫌 疑犯: 


笔上晬 


核对清单 


有了一岭除虫的经盼后， Qwer 决定快速浏览一下常见的 JavaScript ^ 
. 或许这个缺陷将符合其屮-项他已线遇过的错眹， 


埜只杏啵敁 f 


协助 Owen 核对电台直播来电脚本在本例感染上的问题类 SL 
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磨笔上阵解苔 




笔上粹 — 
解答 

□ 未成对或缺少 r 大括号 


协助 Owerr 核对电台鱼權来电脚本在本例感染上的问题类型。 


/ 

因为打错字而使栎 m 符命名错误 B 

An 

□ 全新的 W 题类型 t 

、 

ehectiWiMFirtO 在 fe 的成 用不小 心 （ 逢康 
-) ■笔 w H 4 ■威 ehecfcrfi"««Ofl 打 f AN 異逢 

的遂!數 r 高 ■£ Sfe 未玄义 n 


□ 米成对或缺少了栝号。 

□ 误用引号戍撇 号. 


龙备数的碑角 (( ♦改 < 犬茑 
的 W. chjrckWi.nnitt(.) t 抑句 
砂 i @ 个问坻、 



修正函 数名称 
的打字错误， 
消灭缺陷^ 



onclick^^checkWinncr (this . form^ document .gQtEientGntById ( ' caller ' ) + value # 7 ) w /： 


每个人郐是嬴岽 ( Pug H ) 

处揮_了麻烦的 “未定 夂的"打字错误缺陷，电台直播来电脚本仍然 
在触发错误 i 好消息娃浏览菡不再汇报任何问題，但每个来电人现 
在都是廒家 一一 _本其至对来电序号；对的人宣告止:确的序兮 n 如 
果 Owen 不想出解决办法，电台就得发出很多奖项！ 

来笮 人冉禾 
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除错务尽 


用 alert 框调试 


我们知道获奖序号的处理，是以变毆 e a 1 1 N u m fn 


checkWinner [) 函数的自变玢 winningMuTTi 作比较。他这段程 
序代码敁然没问题<……我们需耍吏仔细检迕 callwam 发生什么 
变化的方式 t 

if (callNum = winningNum}( 

希来在 j 边祐 c ^^ Nhph li is , J 




alert 框可作为调试观察窗 a 

结果 t alat 框不只 4 对终端用户 (end user ) 呈现弹出佶息，它们 
对 JavaScript 的开发端也很冇用，可作为变 ft 的暂时现察窗 O 4不只 
如此， alert 框也可确认某段代码的调用是否 L i 预期相 符1 在本例中， 
使坩 aim 框单纯为/检奄 callNuin 的变 货值， 


:打(拇链供的& 
| gO . 本削笫子晛& 
st 雀值。 
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watch (观察]时的术适，在示在运行程序时忭续观 
察一个变 alert 框提供 f 虽非持续.但仍非常有用的初级 
观寮宵道„ alert 能用于观察 JavaScript 代码的灯:何一处变缺冇 
M 题的地方。 


耷乃 C 轵单宅 的埤号 


Owen 发现，电 台度播 來电脚本+知何故，把 call Mum 与 
winningMum 视为相等 + M 然在 if t / j 句前的 callNiim 显然是 NdiN 。 里 
然 callWum 为何是 NaN ti 经够伤蝻筋丫， Owen 仍决 记洱把 akrt 移 
人 if 语句 . SL 检迕是否有什么变化 D 


从 dert 观察到 callNuin 神奇地将自己设定为 7. 而且 
就发生在一行代码内.你认为造成这个缺陷的原因是什 
么？ Ow 明又发现了什么问娌呢？ 



除错务尽 



勒4 

本周主题_: 

Alert 浅谈它对缺陷的鄙视 


Heart first ,我必须承认.你的评价根髮杂。有人说你 
很烦人，但我也听说你是调试专家的好朋友 „ 你妲意 
为我们说明哪个角色才是真正的你吗？ 

AJert ： 说我烦的那些人真是瘀了。我是好 人。 我也很 
笮纯^ —你给我要呈现的信息， “变！ ”我弹上台为 
你呈现 信息. 就是这样。哪有什么问题呢？ 

Heart First ： 我想弹”出来这部分有点争议。因为那 
些奇怪的广告窗 L 1 总是一 A 弹出来烦人，弹出式窗口 
( pop - up ) 最近的名声实在有点左* 

AJert :噢！ 了解-嗯，我了解你说的烦人之处了《 
4是你不能闽为愚鴦的木 e 不俑得# m 陕槌而怪罪铁 
槌啊！知道我的意思吗？ 

Heart Fi » t : 所以说，我所听到的一切恶劣传言 t 都是 
因为你被误用了？ 

AJer ( t 就是这样^刚刚也解释了，我只是照孛行亊。 
你告诉我弹出一堆广告窗口，我就照辟 U 并不是说我 
莒欢这样做哦！只是决定杈與的4、在我身1:。咦.我 
还以为今天要讨论我对调试界的贡献 D 

Heart First ： 对耶，真 不奸意 思，我听说了你的不少丰 
迹，协助 JavaScript 开发人员追踪代码的觖陷。你是怎 
么办到的呢？ 

Alert ： 非常简箏 ， 苒的，假设冇个发狂的变豉被设 
K 为完全没有盘义的愤。程序设计师也发狂了、 咖啡 
因过诠……相信你也听过这种状况，他 ri 急需观察变 
设在程序代码不同此的状态， r 解变鼠如何改变 。 所 
以， 他们要 求我跳出来显示变： !;=■ 

Heart First ； 仍你如何在程序代码不同处 M 示变 K 改变 
的值呢？听起来很难， 


Alerts 一点都 不难。 你只耍多调用我几次，每次阔用 
都放在程序代码不同处即可， 

Heart First : 原来如此 s 你旮为调试协助工具的时候， 
遇过任何问题吗？ 

Alert : 确实遇过，如樂有段程序代码运行多次. 
例如在循环里，我就不太适合弹出屯的调试仿息了。 

Heart Fiot： 为什么呢? 

Alert : 我是个弹出窗 Q T 所以必须桉下 “ OK ” ，我 
才会关掉。如果我会弹出很多次 + 表示歐标要按 m 多 
次。 

Eicaxt First ; 有 if 押我还听说，就算不是发:注意数据 
的状况，你也很方便好用， 

Alert ： 对啊。冇些时候不太确定迫否调用或何时调用 
了程序代码，在一段代码十叫我出来，你将可知道枵 
序代码是否真的被调 M 了。 

Heart FiH tj 存:所有这些调试状 况中， 你是在说你只是 
哲时存 在吗？ 

Alert ： 当然哕！而艮我-点都+介鹿。毕竞我另有其 
他终生职责——调试只是一点小小的社会服务而 e。 

Heart First , 样感谢你花时间讲解悴在调忒上扮涫的角 
色。希望下次还能冉#豇你^ 



目前位罝 ► 509 



有逻 辑吗？ 


還辑差虽然含法却有钕陷 


Owen 把焦点锁定在逻辑错误 {logic error ) ,也就是合乎 Jav^iScripT 语 
法规则，汛完全+符合程序意 阁的错 误 # 本洌中，误以=取代==, 
表示 winningNum 的值被指派 ( assign ) cal lNum , rfii 不是比较 
两者的值。你觉得吹毛求疵吗？是的， m 它就是非常有问题。 


if 


if 


(cal 1 Hum 




irmingNum) £ 



(call Mum ■.* wimiingNum} { 


这项错误的真正问题，在于圮不像语法错误般会 i 上浏览器找到问 
题。 JavaScript 解释器不会抱怨，因为指派 ( assSgnmcnl ) 的行为“返 
间"了被指派的值，在 winningNum 的例子中，即自动于 i £ 蒯试条 
件中解释为 true (+ 为零> n 换句话说，这段版例代完全合格，虽 
然它的作用跑想象中完仝不一样。 


的代铋，鍩嚴有只磾埯 
■>> 难 W 格笼的轳.够 — 


j 改变=为 ==， 
J 消灭缺陷！ ’ 



达幺迮，逻 A 格镇善 I 
乎盆出现在洳 *£# 的鳍 
镇垃刺 fe 磷？ 


逻辑错误就像灭蚊灯抓不到的苍蝇。 

逻辑锘误如此难以处堙的原因，就适在 T 它们很少能像语法错误-样 
畝示出来。虽然卷到浏览器列出的脚本错汉总让人丧失自怙， m 这些 
还是不幸中的人幸，它 f 「 i 是已经检 测好. 等你解决的柑误> 逻辑嫌误 
并未违反任何 JavMcripi 的语法规则，所以通常较 难检细 L 

另一方逻 IU 错误有时会在脚本运行时造成脚本访法错彳^例如说 
逻辑错误在于变 liUf ■未初始化， 11 未定义”错误将千脚本试图引用变 
昧时出现，所以，有些逻铒错误还避能 W F 追捕缺陷的心力 D 
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复习要点- 

■ 语法错谟关系到程序代码违反 
T JavaScript 的语芑规则.通常 
能被 JavaScript 解释器捕捉， 

■ 字符串必须小心地以成对引迂 
戎撇号 S 起, 


:转义符只用于转換引号与撇号 
的意义吗？ 

^ :不止如此， JavaScript 还支持 

数个转（符> 例如使用 U T 在字 
许串 I 栝人 tab 字符;相同的 道理, 
括义符 \n Tnewline 字并 D 字 
sfi 量版的反斜线符号則以 U 枯义， 

为 alert 枢里的丈字加上辂式时 , SJ 
是转义符能被有效运用的一个场合, 
你可以使用与 \ n , tab 费责丈字的 
对_夺 s newline 則控制文本.段落的 
换行 。 

构■- 转义符用于 HTML 属性时 - 
为什么会有限制呢？ 

^ ： 限制是关于 H HTML 属性并未 
会 J a vaScript 规則 11 的事实 ，至 
少不太尊重用于绑定属性值的字 
符。呆然可以把 HTML 属性中的 
JavaScript 字符串里的字符转义， 
仅它不能 是掏起 属性值的相同字符。 

听起来很乱七八糟吗？这样说 
吧， HTML 单沌地把属性视为"必 
定出现于 U 号或撇号中的乩” 就 
这幺同单，无论诈用哪一个符号当 


n 在 HTML 电伴处理器的埔性 M 
包含 JavaScript 代 P5 时，应小心 
混用引号 Hi 撇号， 

_ 对于 w 在脚本 I 观核变 tsr ， 




作边界字符， HTML 均假设它遇到 
的下个相同宇符，就是结束成性值 
的成对律尾字符 & 因为 HTML 处理 
属性值时不会在意 JavaScript 的转 
义符 t 


位转义荇在 HTML 属性中还是行 
得通 s 只要 fR 于■起属性的字符并 
表与之冲芄。例如在事件处理器的 
状况中，其性值最后仍将被解绎 
为 JavaScript 代妈 t 



R ： 有没有在调试过程中提供详细 
控制的精美调试器？ 

答:有一毪， 而瓦栉微研究 、考忠 
试用现成的调试苒，也是不错的主 
意。不过 * 好的煸码习慣加上衣幸 
争到吋调试技巧,将在未来的长路 
上与你相伴 ¥ 直到协助各位釗建无 
諶的脚禾为止。 


alert 椹提供了初级挝好用的选 
项 □ 

■ 常圯的错误 t 不小心把_试条 
件里的==写成 = d 


^ :当 JavaScript 试图引用未定 
义的变量或函数时，究竞发生何事？ 

答:未定义变: Sr , 是个未 被创建 
或虽已钊建却未被聆派任何事抽的 
元伦哪种状兄，变責中存储 
的值都是 w 表知的"，史精碲地说， 
都是 111 未定义的"，凡是企图读取 
该值并行使有意义的行为都雯饵完 
全无意义 ， Java Script 因而产生错 

相似的情况犮生在馬数受到调用， 
JavaScript 解释器无法根据名称找 
釗函教的狀况 fl A ft 未定义 t 表示 
谓用它也没恚义——无物可珥用。 
于是 I JavaScript 认为这是个错误 ， 
因为无法有意义地运行程序代码， 

问: callNum 变鑽 在被送入测试 

条件前变成了 NaN , 这又是怎么一 
回事？ 

答:现在还不知道 D 不过这说明7 
一件事，脚本中尚有轺所以链 
塽追踪鈇陷仍是项重要的任务…… 
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语法错误 vs_ 逻辑错误 



今晚 主题： 语法错误与逻辑错误分享他们对破 
烂脚本编程技巧的热爱 


语法错误 

嘿，我听过你耶。榍说你很狡猾 & 不 a 我在想 
…….你是不是真的和我一样皁受写得非常糟的脚 
本？ 


逻辑错误 


那当然 u 表面好像正常 + m 离开视线就出现各种 
奇怪问题的脚本是我的嚴愛啊 t 


我不这么认为。栈冉欢那种一眼就能#到麻烦的 
脚本 s 那是我的专长在脚本 m 面放化个我、保 
证浏览器尖叫个不停。 


4是那样有什么好玩呢？大京梆知追偷袭 e 有效 
串。先 q 诱他们觉#一切都没问题 t 然后慢悭地 
开姶在各处放出一咚小问题，如果安俳得够巧妙， 
大家甚至会以为浏 览器可 能运怍不正常 J % 

我不太喜欢你那种扭曲的观点，但 茧点是 你仍然 
允许脚本运行。我不爱这一資.我偏好 t . 路梢下 

它的运行。 你讲 到重点 了*宾可惜我一直找不出像你一样淖 

止脚本^彰显自己的方式，或者来点更好的…… 
让核个浏览器失丰堪炸。这样很酷吧！ 


是啊，可惜我们都受限于损害能造成的范阐，没 
错，能够 搅乱网 ^阻止它的 E 常运作是很好玩. 
但我讨庆不能访问其他亊物的限制唉……如果 
我能玩弄宂满歌要数据的硬盘 i 该有多好啊？ 


噢1 一定会好玩到不行的1你确定我们连一个切 
人的角度都没冇吗？ 
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语法错误 

没 有…” JavaScript 解释 S 的安全锁非常紧， 


没说过1鹰术怎么变的? 


那你要怎么脱身呢? 


我也有个+错的类似经历，就是大家忘记为每 
段 JavaScript 语句加上分号的恃况。解释器会让 
只冇争行的语句通过考验，但总 有一天 ，某令年 
轻气盛的设计师会试若“最佳化”代砰，把语句 
合件成一行，此时躭是我现身的时机，这招永远 
不会失畋——我每次都笑得满地打滚！ 


这个我喜欢，如果解释器注宜不到，表示我能 
突然现身吓他捫一跳 . 我看> 我们不如眹手出电 
吧？应该可以造成更多报害哦 [ 


这就 动身吧 【 


逻辑错误 


好吧， 反正还是有不少好玩的事，我讲过关 
T- =与==的小览 术吗？ 


很好玩喔。程序设计师本來想输人==,比较两 
个值，彳4他们错手綸入成=,结果变成值的指派。 
莨好笑，他们花了几个小时，却舂不穿这个小把 
戏。而且 JavaSceipit 解释器也不灵光了 t M 为这 
样的代码在技术上仍然合法。 


找 有很多 这类把戏，游走在合法边缘却又造成麻 
烦,是项非常楮致的艺木啊。 


讲到这个，我又想到一个不错的故丰 s 我舆欢冇 
人在撰写函数后才决定修改函数自变 ft , 这招也 
不®央畋——他们忘记修改所有对函数的调用, 
这些 调用应该都耍吏新为使用新的自变置。如果 
一切顺利 + 解杼器不会注意这件事，他 nH 彳因为 
坏棹的14变位 rfrf 得到崽外结果 u 


赞成。乌上动手吧! 
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缺陷真够多的电台 


每个人都是输索 [( Pug 翁 4) 

Owen 渐渐/解，除虫的工作不如他原本所想得那么咼修奸 if 语 
句的逻辑锚误沿 + 脚本变成+曾这布瓿家，我们从每个人都进族家的 
无堂，掉到每个人都垃输家的地 SJU 如果 Owen 不赶快把这只缺陷解 
决棹*有些人的自挣心想必会受影响 4 



3咢来电人 




电人 


要起磙*个人阀吋軺从 
農实坌聆牵.沒右 人蠃译 
丈典 B 


—jag ■一 ■ 圓 


\ m \ 


4沄來电人应找覉 
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有什么控制台可以用吗？ 


浏览器的调试控制 fe 能帮忙 

太多敉浏览器都存调试用的控制台 + 真正的错误校制台、负贵列 出脚 
本里出现的错误。掊误控制台非常冇助干找出脚本里的问题 T 而 .11 多 
半都能诊断出发生的问题 n f irefox 拥有特别出色的错误控制台， 



赖 Fit ^ 的持这苒鲥合 6 


R-VIIB-PHIM- 


■lliirf-BItt. O. 


观察变垦时，错误控制台并非真能帮忙^ 

成 许现成 的错误控制台真的很便利，但圮们对观好 变眭没 
有实讯 fm . 不过軒个好消息一创建你0己的错误控 
制台作为观察奋 n t 仍是在 我们的 能力范闱之内 
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t 定义一个谪试控制 fe 

自定义一个调试控制台的想法刚开始听起来成仵很吓人，但它其实只 
黹依眧耍求圼现文字。关键在于控制台必须直接 在网页 . h 列出阒 忒 信 
息 t ffii ' 作使用 akrt 疱，一个分离的弹出窗 n 仍然可用，只耍帀广无盖 
一餓 " OK " 按钮，但盘接江网页 I -. 呈现阔试信息比较简单> 而且一 
柞冇效韦。 



组件如何相互 ft 合，其中包括自定义的 JavaScript 调试控制台对象。 
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磨笔上阵解苔 




笔上晬 
k 解答 


设想一个 JavaScript 谰试控制台的设计.让 Owen 在网页上的一个 
动态创建 K 域中列出调试 信患列 表，请 11] 出你觉得必要的设计组件 
以及各组件如何相互配合，其中包括自定义的 JavaScript 调试控制 
台对象 n 


碑 试竚射 9 糾成 
妹馋备 一个* .: 右. 


± A . ¥> disj > u s ^{) d 
Fp 4 i 菜 ■竑 .控制会 S 域制作埘的 一/* H @ 


callNum t 1 
callVuAi 2 
cailNuxai 3 
callMum i 4 
callKum : 5 


闲舌 U 汰 S 峨的 HTML ^ f . 
由碟 该硿 ii !' 会 d 态珀劍連 ：也拔 
n 诔试硿 射宕的 走蛣 不宪吃 
HTML 代 鉍。 
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JavaScript 冰箱礤银 

调试控制台 的程序 代码少了—些 片段。 请使用下面的琢铁填人空白 
的部分 . 完成 DebugConsoLe 対象的创建。 


consoleEten 1 ：. id - **debug " ； 

consoleElem.style.fontFaunily = "monoapace 

coosoIeE-lem. style, col or = 11 #33 3 333 h 7 


DebugConsoie t prototype .displayMsg — f anct ion i rJiSf? J 
// Create the message 

var rnsofci；lament - docuinenc,. createEienvent { ^div* > ; 


this - snadevd ? * #EEEEEE" 


msgEletnerii. r sty] e .ba (■: kq 「 0un<3Cd3 Of 


h 


tPPPPPt ，n 






this-shaded 
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JavaScript 冰箱碎铁解爸 



JavaScript 冰箱磁银藓芩 

调试控制帥 n 序舰请 ㈣ 下麵 ㈣ 填入空白 
的部分，芫成 DebugConsole 对象的创廷. 



consol^E 1 &m .id - "debug M ； 

consoleElem.. style - f ontFaiaily = * mono Space 
consoleElem,style.color = "#333 333 %■ 


迓贫硿制含的某一个+ 
义#4个本导钱」用子 

龙砀郝分„ 


// Create the alternating bd.ckgroundi color property 

this , f shaded~|L false ； 好華捉逢利 •# 碎沒 4 
^mrnrn^m _ 6a1 ^ 形域耷 (i 的奁 


iJFFFFFF 


_ 


/ / Toggle the alternating tjackground color property 
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为你的调试控制台调试 

0wen 已经等不及要启动新的调试控制台.找出 电台釭 播来电 W 本的剌 
余饨误 f a 所以他在两 M 里导人了 debugse 文件，并 i 页面标 头仓傲了 


DebugConsole 对象- 

< script type- w text/javascript - > 

// Debug console global variable 


的 Oei^Ccfn^it H f 


vsf consols = new Debu^CoDSn^. 0 { I t 


可惜，天不从人恩 6 o wen 第一 次企闱 使出调试控制台时，他发现白 
己只让问暖史为复杂，新的调试控制合广生 r 全新的缺 ki ! 



s 殊节 Ft 

从辨枣 s f 

达皋 7 . 


产生错误的代码 n 是试若把子卞点 ( div ) 附加到文档主体下，不该 
有何题才对 。 

document.body .appendChi Id(console); 

一定出 「什 么差错 _ 卷来绝对与新的 DebugConsole 对象有关。 
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观察时间溜走 



的时 ㈣ 点。 


如成闷 S 的 HTWL 九索 
㈣ 入食 ㈣ 入 

味今杉決 3 


嚷， ■■…闭义在鋅头啐运行 
的喵 | 无法达闽崗—钙苗 
允的 HTML 无*。 
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除错务尽 



并非所有在网 页标头里的代 码都在 网页标头里运 

把函数代码放在网页如头 h y 闲数代叼仵网失电运行是两 M 窜 
——函敎直到被调用 t 才运行其中的代码 D 01在函数外的 代蚂则 1 ; 标 
尖我人时点抟运行，这些躭是可能选成向题的代码， 

以 DebugConsole 对象为例，它不能直接 & I 逑在网页栎头里， 困为 
它的构造蚺数5网豇主体内弈非常有关。 



磨笔上阵 



浈写出你觉得 DebugConsole 对象应有的创建时机与地点> 
以确保它能安全地访 IH 网以元素。 
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磨笔上阵解答 




笔上晬 
解答 



清写出你觉得 Debugconsole 对象应有的创建时机^地点， 
以确保它能安全地访 H 网页元索。 

列览器发出的 $辟挂让減们知迮问 丟艽貪 载入的时 d 辦 
1^ , 0*^41 sCflmSeif 片象点（食剖違的4应 sntcuji 事件 _J 不 C 3. 苻句@个对卑 
的 cp^u i ■! 仍左茂旮两否杉共 f P 沪，让达个时象#全易4 f ——哉们 

*■■■'■ ■■■■■■ - — - - _-■_ - ^ - - - - r t - ■»- p 1 p 1 ■ -I b rri ■'■■ib ■ ■ ■ ■ ■ ■ -19 ■ r ■ r ■ ■ ■ r ■ ■■■.■■ a i. ■ i. d i. d k j j •. - ■> j _ j » ___ - _ ^ _ ■• _ -^ P e . r _ r B r g r a ( i 

详用构遠 W 实好釗？ t 时萆. 系是？ 和 o^d 專邙4生 B 


移动 DebugConsole 

对象的创建位置 

削减调试控制台的 
缺陷！ 


tbody onload-" con sol e = new PebugConsole (^ ；： 


冷碎在 aniaad 拳件 ■= 


最麻烦的 错误： 运行对 

不会载人文挡主体的问题是个运行时错误 {runtime error ) 的例 
了-—— R /+: 脚丰实际运行时才仵某种状况 T 露睑的锫误。有时候 + 运 
行时蜡误只在出常待殊的状况下浮现 t M 如遇到 苋种用 户输入的数据 
或发半特定汝数的循坏迭代时 P 运行时蜡误通常是砬堆抽:的错误，它 
们非常难以预澜。有时候，光是重制别人遇到的运行时措误 t 就是项 
挑战了。 - 


运行时铐误 R 在脚 
本运行紂崖生特定 
情況时 出规。 



仰该硿則.昏的鉍陷.每个 
iifi 的梓 $, 电 m 级 
載入齒當试沃问它 S 淺威 
这 i 个》存癣本这 Hi 




Wkr 


Ci|_r 


I 


喊 : rm "■■ c ，一灿如 
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除错务尽 


JavaScript 三虫窖 


运行时错误，加 h 我们 E 过的另外两种 JavaScript 缺陷，构成‘三虫 
客'■:语法错误.逻铒错误，运行时错误这些错误能出现在任何 W 
本屮 t 通常还会同时出现 I f 解这三者的不同,&成功字找沣捎灭它 





请写出下列馆误描述的类型。 


们的审要课题 D 


运行时错误 " ffe ' 

(Runtime error) VY 

1 

剛运行时的条件而出现的错误， 
例如用户在表的里输人特定类盥. 
脚本无法处理的数据，成试阁仵 
对染创述或初始 f fc I货边 M 对象。 


逻辑错误 

(Logic error) 

N 锚以的逻铒而造成的错保， 通常』 
意阄做某件杯 i . 却意 外地巧 ■成另…^ 
啦的代 fit 有畔具有逻柑错误的代 fir 
仍会如它的说始总围股此^ 
程汴设计师 -./ f : 始就以解了仟务。 


语法错误 
(Syntax error 

由 r 违反 JavaScripi 言规则而造成的错 

以，^示程序代岣不适 fTFJaviiScirip ! 解 
怿器中运行， ^ 


■, h.1 ft ] s- 

r ; hCii ^ 1 =■ _ ^ _ 

- Lllle^OSI iraE.e h rfidivi Crtlien 


*: &t t Lpt ryps = 


- i rcscL /] ava^ffr 


ip L • urc-.debut iW.m ' P t? 


在 iC 语句的测试条件外缺少栝号， 

忘 id 初姶化计数器变 ift 为 dc 

创违-个循环次数 超苡数组诂坫 一个元忐的骷环„ 

忘 id 以结尾大括 y ■结朵函数， 
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习題解答 







谓写出下列钵 误 描述的类型. 


/ f ： if 语句的_试条件外缺少括号 - 

忘记初始化计数器变袖为0+ 

创建一个循环次数梪过数组沿化 •个元 桌的硝环。 


Syntax 

Lo^ic 


Runtime 


忘 i 己以结足大括号 结柬 涵数, 


Syntax 

i. j t.V '.- j I a ). a i b 



不是数字不是数字 

调试控制台终 T h 线运行后，现在可以观察电 ffi + f 进来时的 



callNum ^ 乂+用挣扎 茬关棹 一个个 alert 框。结果，我们终 
f - 在到 Chven _fL 您略的错误 。 cal 】 N _ 变现力 NaN , 意思是 
说它不是数字1 m 是，为什么会 这样？ 
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除错务尽 


当艰察还不够时 

有时候，观察变蛩制造了虹多的问题，而不是提洪答案。为什 
么 callWum 不是个数字？这样的调试控制台有什么用，如果 
它只足 证明 阼已经知迫的亊情……程序代码有问题！我 fj 究毚 
该如何找出是什么柞特定的问题呢？ 




现在怎么办? 


在猎捕缺陷时，移除程序代码是个绝佳的脚 
本简化方式。 


{h JavaScript 睹试的 [. 作中 ， 有时悻简^■反 J# 灰示了 
I汽万诂。在本例中，移除代码井观寮变设值的 
就是个非常棒的主寇。但_除程序代码听起来实在 LT_ 
人不舒服，毕竞，完成调试后仍锘留 F 大部分代码 & 
我们㈣要禁用 Cdiabte) 程序代码的方式，齡真的 


把圮们移除。 
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注释使代码瘫痪 


利用注释暫时禁用代码 

把可执 H 代码藏在注杼里 t 是在调试过积中禁代码的绝沌他利方式。代码 
可以 选择性地被 柚离脚 本的运 u ， m 不忠贞 ik 地刪除^把这种川注释隐鹹的做 
汰，2成作滞处嗝离缺陷时削減或-段代码的乎段 n 


注#在暫时 
禁用 代码时 
關。 
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f urn : t 立 on r riG rkWi finer ■! 『 dnn r e ~^ 
C£>n3o 1 e . «.J i. sp^ c "^ - 


a Ller . 


Tjinni fig^uiPl 
E：ial IM'jrfcl i 


" Increment 
var cal 1-Xujn.i 

•■ + L-rt 1 i N LL ^ ； 


.he c^il numbes ： 


"Check Edit a witnsr 
it I. cal I Hum - w i r j'i 1 n-gHu^n) * 
■tlerl (taller ， _， r 

■w i n;n.0T L ■ >; 

form. 5Utsn i t. n ； 

elr.e 1 / r = 

1 Kesi-i: the cf ll^t f it? M 
VtfT C 3 i 3 *Ci ^ f"i 0 ~ docijrr -^ r'r 
ca 1 I ^ rritit 55 - h N , &kt 

cal '^ rFiG >] ty^ oc，iS 1 ^ J 

> / 




».UillNu-n 


todays 's 


Eof Lbe cstUe-r 

• getElenisnCT^y 工 di 1 callow fe S' i 
mallei h ; 


#oa 


tSIC^Hi 2 l Winding Co.M«r 


U N a wi 5 t 署规存 ® •> 
54 t 穿 Mth 代 H 今 . 
年 ®3 迗个定雀. 




cbII^ljibi A 
callHu «5 i> 
call ^ uBi ； o 
SaXlRuiaji 9 
call^LLmj 4 


多巧;耢用基逛 s 的一 

伐访穿 s 玟讲 试伟总 
的都分 .. 


4口采只有递增来电序号的那行代码被加回来，你觉得会发 


生什弇苹? 







除锘务尽 


问越解决……算是路决了 

改用誑行注释在想用代码 I :比较有选择性。如果加人 ii 增 
crallNum 变竑的程序代码，它的运怍方式终 _f 像该有的杆子了 n 所 
以剎余的禁用代码屮潜鹺荇问题的成 



料餘送携 变岑 的代廷的穿床 
使右， 婷彳寿 J.) cnlt^ it . 


eaLlNiiBiL 

c { kLLN>JBs 

e & ll^grai 

enllN 匕 fflt 
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麽笔上阵解答 


<上解阵答 



t 有写下 calf ^ um 的缺陷在调试控制台里到底有什么问题，并写 
出解决方案4 

t± f^ctUJ^unpi-C) 函&丨 . 秦叶地 tvl Vfli 别建 5 另一个名你的轉袅 {: qiiWiim 

i n H ^ H i i' ， : i m ，,; "'j'i 'ik- ^ 4^' 

lEiriBIR ■■■■■■■■ ■■■■■■■■■■■■ I dldlkJfriiilftiillidfaHii ■■fa ifln‘bdai !■■■■.■■■■■!■_ pipqpifpi||ii||i .■ 丨 ■gnj 丨 I 丨 _■ 

I ®# 姿葙耷 s 与采 w 娟 化. 奸 w ■递憎耷稍启狁良宕比忮轵早致"不 
足 教字- 的闲趑 u 阡正方式只乘稃除基盘 f 的一 i 饿妈 - — W . 1-^ ^遵要邦 
St # caUMulm — f-T „ 


删除创建局部变 
量的代码，消灭 
缺陷！ 


// increment the Cctl 1 number 

' . flf oa 1 Itlum ； 

■+ ca ]] Mum ； 、 ^ _ 

埯丨禕除啬外舍 ) S 易郝立的代 b 

函&即巧电成老局 . 4 雀 £ 』％州.达 4 基最 
初妗意® 


： \ 


shadow variable 的危险 

电台直捕来电 M 本 41 -的 ca 1 iKum 的缺 IH 沿是 shadow variable 
^ Eft ) 的览例.这迠种意外以相问名称遮盖 r 其他变敁的变设 ， ^\m 
P 局部变 a 的名称与全局变爱相同时浮现, JavaScript 创建局部变垴， 
并在局部范闽内给它较卨优先权 ■: 所以、 fT : 何4:砧部变 St 内的改变+ 
会带到令局变盐 M 局部变蛩掩蔽 fG 娈设，哲时本右不到 

仝局变祛， 


shadow 耷量芨生在 
爲鄯耷璗鸟金爲变 
1 耒用相罔名#劍 
建_ . 大事不妙。 


晏 IS 
If 



金晏定 f 


全域码 


违龙舍易 .4 ■¥ 的 
往萃4 L 


+ + cal INym ; 

J 


.基 { ' —含易 
起，不食歧敁犮 


区域码 


* 4 callWum ； $ 

这 i 读蚌 」 
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除错务尽 



者在不如道缺陷大板位置时的效果杖好，后者刚在果 
种程度上踽离出 M 陷位置时比较这用 . 

这是经驗糾題，速着你的 JavaScript 调试赵給的问：我可以故意创建 shadow varisbls 吗？有关系吗？ 

增加，你的判断能乃也会越来 姑好。 然而，如果不是 簽: 这个问題好比 11 我 T 以故意打断我的瞇吗？ 71 你 
禁用接近问題区域的全部代码，过度地禁用太部分代说有没有关系啊？答案当然是不行 5 敁 意邊成 痛苦， 
码也璉不会出勒 L 如果具的士现棘手问题.立刻禁用害你 i ] 已受苦、也不会让这怦萝被大家接受 n 乃卟， 
吒页 上所有脚本，不要优豫。也别, t 记皙时蜱玢体何为意禺元美运作的程半代码调试原本己是东趺西撞的 
导入标签，它们会把外部代碼拉 入丹 I a 工作，你实在 不需胡 意增加成绘因子所以. R 题的 

如菜你已炫域离出缺陷，要确认它在嵙本的某个区域 + 真正答案是 ： shadow variable 为 JavaScHpl 带来 i 手多 
还有另一个方法、请一行行地禁用代码， 五釗 缺陷消困患与鬼兔桌桌的汁为，在任何精此下都应避兔 u 
失„此时不是禁用所有东西，再谩慢地启用代码，直 
到缺陷出现，而是逐疗禁用 代码， 到缺 玷消失 .，前 




: —1节鉍绮饮电合右接嗥电 



轻儇易携的核对清单 







Owen 的除虫清单 


确定括号都成对出现。 


确定围起代码块的大括号都成对出现——小心地缩排代码有助于维待 
成对的大括号 t 

帑力避免 rr 错标识符名称 变量与国数的名称如果不一致，很容易 

造成大问题。 


在使用引号与撇号时，维挎®用方式的一致：如果鹄要，在 HTML 属 
性中小心地混甬这两个符号- 


使用转义符,为字符串中具有特殊意义的字符编码，例妞弓 I 号 （ r > 或撇 
号 m 


會 


千万绝对切莫别在想甬^时误用了 JavaScript 或许不会把这点视 

为错误，但 你的程 序代码运作得将跟你想的不 一样。 


确定对象在被访问前 B 经创建——主要发生在网页元索上_网页元索要 
到 on〗oad 畢件触发的前 一刻才 完成创建。 


别为局部变墨和全局变■取相同的名称，因为局部变■将掩蔽全局变 
堡，造成某些无法预测的行方 L 





除错务尽 



JavaScript 填字游戏 

在你发现自己对缺陷的敬爱如海淘江水绵延不绝，因而 
跑去买了一座蚂蚁农场前，先试试我们的填字游戏„ 



横向提示： 

2」使用^___快速达岘察 走量。 

4.把 JavaScript 字符串.放入 HTML 属性时，请混合使 
坍撇 今与 _ 

7. 用于呈现 锚误 的特殊現察窗 cr s 

10. ii 反 JavaScript 语言悦列的错误类空 . 

12, 蚤战在 JavaScripl 屮完公合法，却会得出褚误结菜 
的错误类别 9 

13, 未被指派值的定量訧是_, 

14, Owen 自定 i 的缺陷对抗对 


纵向提示： 

L 逆用 哲时禁用代鹆„ 

X 如果 _ sfc 现在变黄名称！ T 是个问题， 

5, 0前斂追合 JavaScripl 调试的 H 络洌览找品牌， 

6. 围起一段荇序代鸪时若少了_ ,你将遇到麻 

m P 

fi . —条巧克力里允许的昆虫碑.片故 f D 
9 . 只在脚本运行时出現的蜡误 & 

U . 使用_为字符串中的特殊恚义字符编码 6 
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JavaScript 填宇游戏解答 



JavaScript 填字游戏解答 
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转过头装作 浚煮到 鉍陷. 

是令错误的方式，或沣终将超支 
你对轼陷的容忍度。所布 
讨人戾的钕陷将使你的 


代码衰弱，这是个问越。 
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12 劫态数椐 



_翱拈我的神弟？.在迠剽 
冷硪的暴诂 a 着赤揉揉，等不 
及典 葙虎出 闸的请豕实上 .絲 
釣亡性才是我取大的资产， 


贴心易感的 
网络应用程序 


★ 


当代万维网是个非常有反应的世界，网页被期待着响应读者的每声呻吟, 

电少许多网站 用户 和开发齐都存这个梦想。透过一个称为 Ajax ——提供戏剧性 
地改 变网页 '惑 觉” 机制的编程技术， JavaScript 在这个梦想中 扮演了重要角 色, 
釕了 Ajax , 网贝的 行沁 比较像完全成熟的应用杩序.因为它们就能 够动态地快速 
下载井存储数据以及实时响应用户， 却不用 电新 钱人网页或利用浏览器的某咚小 
手段 》 
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我想嫛更多*动态数据 


渇望羞动态数箱 

舰削咖吗？飾_施麵 R Uby _ 欢山 
= a _ s _ 驱动的 Yt}uCube _. _料了_編馳，輕_ 

^™ L ^ ， 賊让 ㈣ 到烦鮮堪， 她純描 ㈣ ■赃 ML 
代^屮处則 f 客 n 志的 部分， 把注意力鬼巾到博客内容 n 


新增一則19志到 
VouCube 不 该需要 
編辑网页。 



r :广— --■- 

卞工：二= 


㈣ h 


« B « 
YouCuIk 


Y ^ vCur&e - Tti * Hof ibf Cube Ruzzlcrri 

Blo ^ for Cube PUuJ«n 


谗蛣妗博 i , 也 4 
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动态数据 


的履掮期4网芮芍至 



. hea 4 

books / htjs / T 


i<r/ aio ^is tvv rvuvuu^ ( 

Ruby Z 在策划 行动 J \ 从网页结构中划分博客内容的版本，牵 
涉到动态数据 （ dyiiiimicdata ) :在网页被浏览器处 il 时，动态供 
给网51的数抿。以动态数据建造的 M 贞称为数据驱动网 M ( data - 
driven page ) , W 为这类 ㈣ 贞只定义 r 婷若数据填人的51面架构 rfnQ 。 
换句话说，数据负 贵糾页 的内容， 


惮菩 fe 戏的 龙砵 另外存储 
成一伶念件，笱為 不硭銶 
刺否的伕冼 T - 瑀鶫汰汾 


博客数琚 


M 态缂害 教葙 I . J 网页工■的 


的 HTWL 闯布 f 


i^VAScupt ^ 


利用 JavaScript 的 t ■办助 t 生鲜博客数据被动志騵入 HTML 代码，产十 
诚终版.石起来4原姶 YoiiCubc 完全一样的 网贞。 但这个数据驱动的 


网页垃由不同成分组成.包 M : 结构 M 面和博客数据圃为博客数椐 
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未雨绸缪 


动旮敷埯咁起采饱篁袅，致 
# e — 定鬵要 保痒小 山保 
的 JavaScHpf 代码，对不对？ 



动态数据需要一点事前编程工作，但日后带来庞大的回报。 

鐘 ，山动态数据驱 动的阔 苋确实忠要一 些额外 规划勺 啦前努力， m 
长期而苫，它带来快速简弟的网页更新的回报远比付出大多（％此 
外. JavaScript 也内界 4? 态数据的支行 ， 郎 要惑谢 —种名为 Aja ^ 的枵 
序设讣技术 。 


540 第12章 



动态数据 


Ajax 獻身沟通 

Ajax 让客户端的浏览器能与网络服务器冇岬“小对话" 
( conversation ) t 动志数据因而成真。更详细点说，脚 
本 0 T 向服务器谓求部分数据， M 如一组博客 fJ 志，服务 
器則用 Ajax 传递数据1而后脚本收卜 _ 博客数据并动态地 


Ajax 让网迈能动6： 
接收 网路服 务器的 
数掩。 


轱合至网 MIL 




客户这皮起戌朿 
舞忘#作岣在， 


^ DflS^pt 0 溥 4 中碟介_ 
在起璜本，公 if 畤在4螌 
合老舄 至 m 负中. 


nifl % 务器钤畸在启，穿 
户 茳这卯 JTfe 起丼吞科與 
灰入玛否中.不£网雨不 
用龙鼾戢八， 


坊 £ D 扔 


U XML " 在博客敫据的上下文中有什么意义吗？你免 
得它对动态軚尨有什么帮助？ 


客声 連网 琦璉濁 Aja*. # 
艽玲.安务费戌乐惮®敖拢 1:1 


鬼务器拉 

%-^ r . 


邊。 — 
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具有任意名称的 htmt 


万用 HTML ： XML 

在 HTML 盟的 "ML" , 是指 markup language ( 标足适言） T 也 
指出了 HTML 使用标签 (tag) 和属性 (attribute ) 创建超文 
本 UU) 的丰实 E 正如 HTML 这种栎玷访言川 f 创逮超文本网 

页， XML 标记语言用于创建……咳 - 几乎一切你想创建的东西。 

这就是 “x w 的意思 —— imm \ 既然有若各种能闲存储成綷 


XML 是种为任何类型 
的数据设计格式釣标 
记语言。 


签 j — 性而 荻益的数据，何不扩展知 k ! l / j 言的触角， 以解决 其他 
数据问租? 





XML 的威力源肉它的灵活性 P 不燉 HTML 是组既定的 h 馆 
与塚性， XML 没有定义仔何知签与祕忡 一 它只是一组餘 
茌与塚性该如何创迚与使川的规 PL — 切说明特定数据表现 
力-式的知签与 M 性规范郎交给各令 XML 应 IH 程序 e 
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动态纰据 


XML 让你闲 B 的标签标示数掩 

JCML •真正 比人心 花怒放的地方 T 在 r 它能把随 M -个路人变成标 签 fj 
定义专家， R 忠耍一点点标孩与械他的炼金术，就可依任 MLI 的煞出 
完全卩1定义的标圮访言' 现在.当然 d 经冇 m 多创违完毕的 XML l / j 言 t 
用十解决备式各样的河 题， 而 .11 在适合你的蛊要时倍用这些 XML 语 

言，这也是不错的右 念， 但想到创逑自己专 M 的棕记语言…"■真是难 xml 代鸹 

以抵抗的 诱惑。 

<jnovie> 

< title>GXQaEning the Cubfi </ titles - 岛 UMC ¥ 的* 个气 $ 

.和存噠夺 tS 袖右的 

< releaeeDate >01 / U / ii 9 e 9 c / relsaeeDate > f ^ 

<director>Gr^erne Cl i f f ord</direc-tor> 



<3 mnmary>A sketeboa^der investigates the death oi his adopted brother , c / summary > 


</ miQvie > 



各位末科看过】-.例——完全自定义的 XMLfe 记语与' 但具 叙述性 


<w PUJ >> 枯 n 


的标签有助 T - 解释它的数据，更重要的是，标签 作常针 对它存储的数 


据——使用 < directo r >^ 签存储异渲钕据> 实在太合理了【 





访把卜列标签 b 它们的叙述连起柬，然沾沣明各个标签是 HTML 成 XML 标签， 


< i tunes : taufhor > 
< span > 

< title > 

<strong> 

<input> 
cprompt> 


网洱中的粗体文字。 

在线新闻的标题， 

网沉屮的输人控制组件。 

为来电苫转换为语竒的文字。 
iTunc pekicast 中的作-曲家7艺术家, 
网页中的内嵌内容 a 
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网 M 中 fdH 体文字 n 
舟线新闶的标题 
网页中的输人控制組件, 


的 VotfCtfbe 晚揸 H 这 H 
XML A 件兩 S 新 防 


+ P * ■»■■!* 


















动态数据 


XMU HTML - XHTML 


XttTML 是瑾守 


扩城名或 许不间 _ fflXMLUHTM 『.有荇非常亟要的联系，就垃 
XHTML , XHTML 是观代版的 HTML ， 遵循 XML 的严格规則例如 
说， XRTML . 网贞中的疮个起始标签必须有相应的结域龢签 。 HTML 
的语法比较快 速但松 有时候就算没为 < p > 加还足 4 以过 
关 & XHTML 就没这么容忍，它要求这戈标签必须成对出现。 


XML 妫较严枵 
语 法规則的新眼 

HTML 。 


HTML 


XHTML 


This is a paragraph of texx in HTML.<p> 


<p> 耔杳連常 # 抽出现 ^ 
HTML 代砝 4. 辞矛段落的 



<p^This is a paragraph of text in XHTML, </p> 





达 I 


HTML 与 XHTML 的另一个亟要差异则关子空标签，例如 <br > T 它们 
的格式钯必须加 J-_ 一个々格 5 反斜线以表示没冇结签。 


HTML 

This is just a sentence.<br> 

HTML 中 fg 當 不食加 i 

jU 4^, 



XHTML 

This is just a sentence.<br 




再说一个 HTML ^ XHTML 的正要差异， XHTML 耍 求所有厲性值均以 
到号围起 I 


HTML XHTML 

<a href-honte .html>Go home</a> 

- .采 i 碣外 # 乇引咢，迖龙 
1 糾 tml 的祀列 

虽然 XHTML 并太直核影响 Ruby 的立即芾求（把沔客数据塑造 
成 XML ) ,化它 N 勒出一些珐車要的 XML 语法规則，这些规则适用 
所有以 XML 为其础的语吉，包欠 Ruby 的〖1定义博客数据 


<a href-*home.html m >Go home</a> 



^ tj XHTML # ^ 4 逆埚 t £ 戍 

4 ?l * f = 
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XHTML vs . XML 


麻 耱帝话 



今晩主题： HTML 和 XML 的网络数据密谈 

条鰣 皈栌 HTML fi 用 xm, Z 
度成形.仿光 miwic a 


^HTMlt ' 〜 XML : 


你为我的生活带 来多大 困扰，你知適吗？我--直娃 
万维网的骨干,现在大家都因为你的关系，一头霣 
永地看若我 D 


你的如 ttS 光只看得到网 页， 这又不赴我的错 - 我扩展 
了白己的心胸，因而可以表示任何类钯的 数据。 


可是没 有我的话 + 你也没什么奸用处，浏览器 U 会 
呈现 HTML 代码而巳，它们其至不知道惮止什么东 
西组成 4 


怎么可能？谁会在 E 旮不到的数据呢? 


例.都耍有我，它们才能被#到啊一■一切都在万维 

网上。 


这样啊……所以说，找们其实在一起工作玛? 

真是让人松了一 口气， 


我是神秘 + 神秘是我。亊实上，我是个没有拉的 
人—— U 有内在，没有外现。在盖要 ft 我表现的时好 L 
时，我才筘#你。 


唉，你还 垃不 f ® 吗？ 外面的 肽界大 邡分时_都在# 不 
见的数据上运作，如银行交 1,政党投 票、天气桢报 
… ，你想 得到的都是。 


婭没错啦_一_“不过，你以为数据被送到网络浏览器前, 
究蔻怎么存储？我可以告诉你，数据可不是 / L 接存储 
成你的段落和表格 fiL 数据通常利用 a 存储，因为我提 
供许多结构与上 K 文——我让数据容蛣处理 * 


IF . 是如此！我对数据的外观没有概念，相对地，我+心 
T - 数据的意义。只要人类继续使用网络浏览器，我就会 
一直需要你帮忙呆现我代表的数据， 
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动态数据 


XML M YouCube 博窖数梅 

XHTML 是个很棒的 XML 应用程汴，快速地改苒了网页结构和稳阁度 a 
不过，从 YtniCuk 博客的角度宋看， Ruby 需耍肖定义一个揆仿她的特 
姝博宮的 XML 访言 D 我们需嬰访问博客所需 的不冏 数据，还要考虑数 
据如何融人有 M 次的 XML 标签上下文， 



<date> 

<body> 




c/blog> 
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磨笔上阵解签 



语各位发明自 d 的博客存储用 XML 语并使 用你的 访言编写陴 
客曰志代码。请把标 I 日期, 作者、 R 志正文等因素纳人考: 


k j, b ■ bj h 1 j j ajajbiaiiitaijididtji.i 

伐髮碍典个籽荃 资负存 
外铒.菩.的 . dtfj ... …,, 


< entry > . 

<date>11/14/2007</aa 


< body>Gotthe new cube I ordered . It 5 a reaf pearl , </ body \ 

</ e ntry > ^ ^ -則体 S e 志表迕寿一 

. . I . . . . . . . \ .. …… 

</ entrie &> ej 鈣 身菡則 诨窖 3 忘主 1 冰 

•i m i m i m ■■■. d i dfca I ii l> 9 ■>_■!! ■ I H 1 ■ 1 ■ 1 _'■■■ ■ I' ■ T ■ r ■ I s 9 r 1 P 1 F 1 P 1 r 1 T 1 r ■? T T P T B 1 B.i 冒 .i-_ S 1 _ T ^ P f? P 1 S ■畤 S" - - J- ™ - - - - _ —- A J i- J * _ *■ ~ fc _ *■ J fc__J hAkd 

，备芊 t ) 5 的杉.吾. > 

</blog> 




?苒蟊问牴 

有•離 


为何不把博客 b 志存储成一般没有格式的文本哫？ 

答; 是 T 以这么微*但柙11成脚本权大的5 担， 脚表 
需5$选数揭，试着分出不柯 I EI 志.还不能沲了 EJ 期 
与正文 6 XML 为数掂加上可预測的結构，所以你 i 以 
轻易地分阱不同域的軚掂，例如分辨出某則博客 £] 志 
的母期与正丈，更别提还 T 以加上标题与作者1\ 

问： < e iitrie S > 标签真的是 XML 版博客数据的必需 
条件吗？ 

^:它并非严格必要.但的确让數掂坫式更有结 
构，而 iJtS 易理你看 11 磨笔上降”的倒子，苦 
没有 < enLries ># Sr ,将无法得知博怎是否支持多个 
< entry >#- fc ^ it 现一；欠的 it 1&>与 < author > tf ' 
晷。 < entr ■:163>标签則指去有许多则博客 H &据 
因此史有组织.关于麩掂的使用方式也 H 为明显. 

问： XML 与 Ajax 有什么关联呢？ 


答 ] Ajax 酋炫是 ' L Asynchmi]Hus JavaScript And XML 1 
的铕写 . 所以 XML —度与 Ajax 直接綁在一起。这个縮 
写最近祓认为 it 时了， Ajax 的角色已毡扩展到不見得都 
把 XML 当成方程的一部分。事实上， XML 仍終形成大 
多故 Ajm 应明程序的基础，因为它提供了麩据建模的 
绝佳机制„ 

本章悄后将提到 ， Ajas ^ XML 产生关系的方式才 
ft JavaScript 支持 Ajax , JavaScripr 并未很 制大家在实 
行 Ajax 请求与吻应时只羝使用 XML 作为数据格式 ，但 
这桿放的确较容具应付一切但也是 最瑣枰 的教据_承 
然 Ajajt 沌粹支义者会说 XML ■号 Ajw 两不相关，实际 
上，它们常常手幸手丼扃而行。就算社会开始碌耶个缩 
写的原意过时，大备数时 候它仍 然表舌了亨实 。 我们稍 
后猗讨论“存少” { asynchronous ) 的部分 D 
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动态数据 


我还 asc 塋认特痒梓式存铴数 
廉, :么会让雔 掩龙战 动态的7 


只有 XML 当然还不是动态的，但它刚好与 Ajax 和 DOM 
都能紧密调合 D 

XML 是最常 f ： JAj aK 合用的数据格汊，因此也是犮示 YouCubc 
客数据的合理候选.片，数据驱动版 YouCuk 的数据将在服 势器端 
4客户端间频繁往來传送 XML 的高度结构化本風， Lh 史成为快 
速运送数据的理想选择。 

rfiiKXML 与 HTML { XHTM 1.) 相似， 遂可透 HDOM + 4巴 XML 吼 
为5点树而访问数也就楚说，你可以设讣 J ^ aScnpt 代码，庄 
XML 节点 树中往 紅移动，小心地分离出想耍的数椐，然后动态地 
銻合数据这么多优点，使 XML 足个创逑动忐.数据椒动 
叫贾时的良奸数据存储方案。 
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加入 ajax 

为 YouCube 注入 Ajax 


蟏琪的摩龙 I 
¥i nm 丈 4 兮 


手上有了新蛘的 XM 1. 搏客义件， Ruby 准饬幵始在 Ajax 的吣助下动 
态池载人义件免 YouCube 网贞 f 。 


o 

服务器收到请求 ，开始 
工作，创建响应^ 
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在实行客户端浏览器与服务端的数据通信 
时 * AjajtLllill 求 （ request ) 与响应 ( response ) 
为中心概念 ， 


请求 


❶ 

浏览器送出请求到服务 
器，并等待响应 。 


_ 一 

i ： " 

u«. m Lmrm , Wfc *U— 1 p^ 

\ 

的 iM A — 淺琅柏 ,晬栗泣有铒 
害■&轉， ©扑乇碰 f 琛律吝 


JUA , 



动$ 数据 


❺ 


服务器创建给浏览器的响应 T 





把博客文件里的数据打包。 


xtviL 博客走4的含都教对玲 
由碭左达史， 


响应 


藤务器填鄉本(不及 
^avcSaipt) 疤时拿 J . 处 
ft 蜱求林托备响由 


❹ 

浏览器解开响应中打包的 11 ^ 

XML 数据，并小心地把^ 
数据整合至网页中， ——*— 




你认为，负责处理 Ajax 请求与 确应的 JavaScript 代码是什 
幺样的程序代码呢？ 


在的 JiKflSctipt 代孩就在网费 


bt . og.Kml 


一宝 XMI 欷级瞀合至碑央 
的 HTML 什铎后 r 昶到 
苋器 ISE a 


目前位置 ► 551 



万程中的 JavaScript 


沒助 Ajax 的 JavaScript: XMlHttpRequest 

JaVaSt；Ti pt 内罝 4 个称为 XM LH t tpHeq ue s L 的对象,用 T ■发起 Aj a K 
诘求件处搜 AjU 响应 。 这个对象非常 U 杂， III 含许多通力合作以 
赶持 Ajax 的方法 h j 特性。 





免并今 ■ f £ 卉们衫 ± tit 
/L 个 .. 


readyState 

ill 求的状态代砰 ： 0 
^ (开 A ) 1 2 (已传这）, 
中）、4 { 已载入 ） & 

status 

^ HTT P 的谪求状尨代码，例 
/如404 (找+到文件）成 
\ 200 ( OK ) * 

含 弟上⑽ 个脉巧 
|> j '4 y A^air 淺求4 宏以合 
格的 4 在结乘。 


(接收 


取消谞求。 


open () 

准备迠求.指定请求的 
类型、 URL 及其他细^ 


Benaw \上3苷个方#含^ 

传送辟求，交给肫务备〜^汴來- s 启泛 


鲁」 

send £ } 



请求状态改变时会被调用的 


器处 FR , 




函数目|用 6 



f 1 ^ - ?] ^ ^ #求的歧忘被 - fi ； 別 

岐戌用的 t 耷义事 4 公理器-— i 个 
華邙吐任 器鱿是 tijj 响在的蟪 : j . 


reaponaeText 

山報务器返问的响应数据， 
格式为纯文本字符 f □ 

reBponseXHl . 

由服务器返回的响应数 
据,格式为 X ML 节点树 




上 < 1 哥个麯乜谔囀 . W ■务 3 达 
它的 Aj(»t e ® 


构成的对象， 
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动态数据 


XMlHttpRequest 相当复杂 


XML . Htt P Reqi ^ st 的威力强大得不可思 lit ，！ n ] 时又苻惊人的臾活性，伴 
陆荇威力与灵活忡而来的就蛙复杂度 UompioLiiy ) ,即使是砬基础 
的 Ajax 请求，也耑耍相1数; it 的 JavaScript 代码。部分原闲在子浏览器的 
不一致，但各种微调对染行为的选项.乂何尝未料推波助澜？我们剛明只 
铝耍快速动态地移动数据的方尤 。 


XMLHtf pRcqoesf ^ % 

很强大，倥使用上有 
点麻艰。 


以下面的范例而言， XWLHttpR 构 nest 对象要在数神浏览器上运作，需耍 


这些代码; 


# 不同的方式 . b 4 釗運 



vax request 二 nul 1; 
if (window - XMLHttpRequest)( 
try ( 

request = new XMLHttpReque^t() 
J catch[ej ( 

request =■ null ? 


苟哝列苗理 Ob ) 


// Now try the ActiveX (IE) version / 

} else if {window.Activ&XObject) ( / 

try { ^ 

request - Qew Act: ve^Objcct t ^MexjuIS ,XMTiHT'l'l 3 " ) j 
"Try the ul<3er ActiveX object for older versions of 
> catch{e}( 

/ry ( a / 

/ re>auest = new ActiveXOb iect ( "Microsoft .XMLHTTP'' \ : ^ 


创建 XMLHt : t pRequest 
对象的问 M , 在于浏览 
器必须提供 S 己的对象■实 
现。好消息是所有浏览 
器使用的方法和特性都一 
致——对象的倒建方式才 
是浏览器间骷要考裙的差 


启诮求 。 曳爸逋畦在戏们的碲伞的音 

m 寒 m 栌 t 炙义基垃。 

reqi^esL . onroadystatecln^nge - handler ? 

request■open(tvpe, url, true); // always asynchronouR (true) 

^ i| ^ . ih : , * if! ， - <| 备说 J4 达 . 同 M 納耷鴿求的尹 f 
(^ET POST) v 


汗冶请求时，你必领棺定诰求的 炎 : 型 （ GET 或 POST ) ，还 
朽服务器的 URL, 以及淸求是否 “ 兄歩 ” B 非同步谓求 
(asynchronous request) 在后台运作，不用让脚本等待，所以 
儿甲 •所冇 Ajax 谓求都足畀步淸求。 
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我章到了 


兵子奸 T 乌 POST 

Aju [ 肖求的类型 （ type) 非常乾耍，不只反映伶送到服务器的亊 
物，也反映 t 吉求的意囹。沾求类贺，或称湞求方法 (method) a 5 
是 CRT, H 耍用十从服务器取得数倨，而 + 肜响服务器上的其他东西 \ 
另 ■ 种消求类犁， POST, 通常与传送数据到服务器有关 T 传送 圮的服 
务器状 态逋常 行所改变，以响应传人的数掮。 


Ajax 使 1 D 的遇类请求 
为 ftET 鸟 POST , 乌送 
出 HTML 表单蚪相同。 


get 

不会改变服务器 上仟何 事物的数椐获 
取方式，如■縣 t i 碰能透过 u(lL 
传人 小达数 据给服务器。<^7非常适 
合从服务課上的 XML 文件卿博客数 

据。 


POST 


巧”制⑽器的数据 ，因为某种 
改变服务器状态、例如存储数 
据到数雛中. _贼_^= 

⑼咖喃 ■动 态新 
■溥客 U 七:这 类任务 的理相帮手^ 



09/26/2008 

i> t ^ 4B b 5reaiflB iuflt - - -r 
cubeapart ■ £jng 


P 附请求 


含 t 个 a 審 
的 XML，x 件的 
名枒 ： 


GET 响应 


get 请求 


fi §^. fi 3 M 4 敁较 
Uiit- 


POST 响应 


0 


POST 法求被窆 果务 
器. © ^ f 5^ T 


埤 f 0志 
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动：蛀据 


&ET 或 POST ? 使用 XMLHftpRequest 的清求 

决定了请求咙型并子开启请求时指定类蛩后，终 F 到了怍 
送诘求给服务器处理的时 n 实际送出消求的代码闲谪 
求是 GET 或 POST 而不间 s 

,^ ET 螬求扣 URL 坊在符4 
:名求吋凍耷 a 


request - op^n ( n GRT r, r 

request.send(mill )t 


妁以 4 给 0 hd () 枘$定 
f 基^。 


'blog,Kml" , true )j H always asynchronous (true) 


透过 GET 请求，向眼 
务器上的 Wog.xml it 

求 XML 博客数据。 



啦牵#扣作&盘鉍检-味浲逋 
蜗 ir/ ■ 必 m 盍敫鸪炎切 


夯苒的 URL (本喇； 6 雕务&_冬） ■> 


requesL.open I m POST a r "addblogent ry«php", true )； // aIways asy qc hronous (true) 

request. setRequestEIeader C H Content-Type" , "appiicat ion/x-www-fonri-urlencoded^- charset=UTF-8 1 

regiieet ■ send( B ， 09/26/200fi£rThese dreams just. B . tcubeapart.png p } i 

泠蜮的 t 4 署 中一起 



别为 GET 与 POST 的事情感到 坯力， 

S 3 如果你未 t 在 HTML 屮遇过 GET 与 POST , 別 惊慌」 随 

七们在 YotiCube 中的角色越发陡固，个中缘由也会越 
发合理。 
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成长中的痛苦 t 简化 ajax 


滅轻 XMLHttpRequest 带来的痛荖 

XWLHttpRequeaL 对象极为 强大， 却冇斿极为陡峭的孕 >] 曲线， 
想必各位都存同感 & 不仪如此.这个对 象还心 要把一定数: A 的"样 
代妈寒到使用它的 Ajas 应坩程序识 E 故而出现 L 午多笊三方函数 
库' 让 KMLHttpRequest 对象的使用简单一点.这些函数库很多都扩 
展 r JavaSuipE 的功能，固然 拫好， m 也茁要 m 多学习„ 


因此，时干 YouCtibc 有帮助的策略,应是创建最小进的自定义时象作 
为 XMLKttpRe . quest 的助乎 ， ih 我们单纯地专注子 Ajax T . f ^ 7 " , 
rffi 不足花 從时间与 X M I/Ht f . pReq ue st 肺斗或令神 町11 地操纵 拓令访 
■:力 : 涵数。我们的肖定义对象 A jaxRequeat 采川驳少 [ it 极簡的方 
Lh XMUittpRequest 办 |■ 象 !li&^-j^ J ffh 


H ) 定义的 AjaxRequesf 
对象滅轻？制作 A|ax 
清孝的棍苦过稃。 



AjiUrR^Jf-u^-Si ^ 九； 數 

HU ， 


AjaxR»q^ eSt 


除 f sendU 方法（我 in 很快就会研究它> > AjaxRequeSt 的 
构造函数就足让 Ajax 戏剧性地变简单的 地方. 可与单-独使 m 
XMLHt 1_ pRe qUe st 对象时作比较。创建 . t 个可以在任何常卬浏览器中 
发起 Ajax 语求的 AjaxRequest 对象 + 只 H 


f Septdf ) 方 i 


S,entf( 》 方 法 f^AxRe 今 nest 中兵 j£ 


XWLHttp Request 


底层的 XMLHttpRequest 对象 
存储于自定义对象 AjaxRequest 
的 request 特 性里， 


v^r ajaxReg = nev AjaxRequest () t ^ t) ^ t'+ ^ ^ ^ ^ 

KMLHttpEUjf 此 if M 象 ㈣ 

的科科错锌 i 深之 4 U 
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动态数据 



JavaScript 冰箱礤铥 
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JavaScript 冰箱磁铁解苒 



JavaScript 冰箱硪锇酹芩 


自定义对象 A ^ xR equ $ s [ ： 把标准对象 XMLHttpRe g a e , t 包虡起来为 Aim 澶咖 

=提===1这情，：= 



^0 ^ ：i 
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动态数据 


理蘚 Ajax 清求 


自定义的 A 知 xRequest 对象由构造函数和数个//法组成，其中冇一 


个方法特 别重要 a sendi ] 方汶 仝权负责准备 AjaK 谓求和对服务器发 



出頃求。所有使用 &tfnd() 发起的 Ajax 濟求必为 GET 戎 POST 诘求 
5 HTMI. 表黾送出的〖肖求一致。差钊在干 A」 m 请求不涪全面電新栽 
人网页<_ 


type 

淸求的.龙型， GET 或 POST 


handler 


url 

服务器的 URL t YotiCuhE 例中为 
blog . xntl ) « 如有忠哲，数据也可以 
包装彺 URL 里 ◊ 

postXJataType 

被传送的数据类翌（只用干 POST , 
get 不需要 ） D 


用 f 处理响应的 M 调函数, 


po&tData 

被传送的数据（只用 T- post s get 不需 
, POST 数据能以数种格式送出. 


所冇 Ajax 湞求都关系到相似信息片段 ， 虽然 GET 诘求省略了最后两 



项可选自变说，所以.前三个 S 变蛩对 sendU 而言尤 其重耍 ，对大 
多数简蛣 Ajh 谪求而言也足够 L 以下阄对 send(> 的调用为例 ，其 
屮使用前三个自变欲，向服务器 t 名为 ^ ovie ^ l 的文件语求 （ GET) 
XML 钕据 D 


别害怕请求 
I [| JJ 的处理^ 

轻私 


我们 m 快就 
要进人如何 
处理 Ajax 谪求 的曲折 奥抄之 
处。现在，你只要了解自定义 
的请求处理器函数必须为清 
求而设浼，井千请求完毕时被 
调用，这样躭够了。 
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我能请求吗？ 


谙隶跑上服务器运动场 




调用 AjaxRequesL 对象的 send ㈠ 方法沿 s 有个 Ajax 消求被传送到 
服务器，网页_先行处理阚页寧务，同时服务器也在处理頃求。这就 
i ^ Apx 的发光发热的地方。如果语求需我:問少， 网页 只好 
光行冻结、无法动作，良到服务器返回响应， 但阗 为这1的请求异步 
处理，网页遂无需哲停，用户体验也不会为此滞塞. 


U 

Liw 


当眼务器处理谪求时■网 
页获允许先行处理其他車 
物，不必受到拖延= 


异步 Ajax 清求被处理 



只因为网 M 件未在处理诰求时冻结，+代表用户貞的能做什么具 


时， R 克不索冻结行 


生产力的行为》—切取决〒网页。在 YouCuk 的范例中，若要成 
功 地査# 博客，完全 P 赖 Ajax 响应从服务器带来的博客数据。此 
时，用户缽验还是与 Ajax 响应紧紧相系。 


动吆等持踉务器处 
理请求。 


复习要点-- 

■ XMLKt tpRequest 对象进处理 . A ja^ 谓求的标准 
对象，但实在冇点不好使用， 

■ 自定义 WaxRequest ; 对象提;供了使用 Ajax , 但 
不需苡接面对 xMLHttpRcquest 对象的便利 /i 
式 6 


Ajax 清求必为两种类型之一 T GET 忐 POST , 类型 
由传送给服务器的 数据， 也是根据数据如何釤 
响服务器而决定。 
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动态数据 


I ' 5 * ：实践 Ajax 请求时 T 一定锯 

嬰 AjaxRequest 对 象吗？ 

等： T —定 。 XM LHt tpKeques t 
对象 _1 接用于产生 Ajax 价求并 
处理它们的响应，也不会有什 
么问題。扠是明明有比较间单 
的 AjaxKeguesL 对象 T 用，为'什 
么会有人想开倒车呢？这个对象并 
#什么惊天动地的大改变——它只 
是个便利对象，代替我们 S 责繁耙 
的 Ajas 淆求构成亊务，以协助約 
化运用 Ajax 的任务 a 

问： ~ a ； (的 K 请求/响应 m 与 HTTP 
的“请求/响应 3 t 有什么不同？ 

答 : HTTP 的请求与响应为网烙 
浏览器所用，从网络股务器上获取 
HTML 鬥饵。 Ajas 的清求与嘀应与 


十 沒有毚 PM 

~有―岡輕 

HTTP 的砟常相似 ， 但有叱 喟关键 
差异 ； Ajax 技随时可能发生，不£ 
碍牵沙到 HTML 故据的速送 a f 实 
上， Ajw 最大的纾处之 一 ，就是它 
能用于请求任何类5!的麩据， 

问、所以 Ajajdt 我们能动态地拼出 

网财? 

^ : 没错！这就是 Ajax 背后的主 
安奴念。但不只是拼凑网页而匕, 
也关系 到組合丹狂的时机. ： Ajax 的 
奇求与响应为实时 发生， 迸常不会 
+涉内页的使用性 4 换句诺说，当 
实际上只有网 ® 上的一 小块需 要更 
新时， 用户不用译下来等着整个问 
页玄新我人，鄆块区域可于“背景" 
HiK' ffl 户利可统续浏見珥页其他 
部分并与之交互。 


闲： GET . 与 POST , 它们和这一切有 

什么关系呢？ 

答: GET 与 POST 决 定了股 务器处 
现 Ajax 请求的特定方式。不过，在 
逋时动态地请求任何类型的数据 
上，它们没有任何1别。关于 GET 与 
POST 的主要区别 T 在于服务器是吾 
炫历 (缘自教掂的）狀态改定，例 
如存储敖挺 J ■&禚戽 9 倘若如此, 

則是 POST ; 否则，即为 GET 。 


连讀看 + —— 

请把每个与 Ajax 相关的杩序代码与它的用途迕起来 n 


XMLHttpReguest 


GET 


获取数据.但不改变 m 务器上的任何 
事物 • 

送 m Ajax 谙求给服务器，造成响应 3 


send (} 


A j ajcRequeat 


f 专送数据至 m 苏器， m 会造成 if 务器 
卜_的改变。 

IK AjaK 成找的柄准 JavaScript 对象 a 


用 T-mit Ajax 诘求与响应的冉定义 
对象。 
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谪把毎个与 Ajax 相关的杩序代码与乜的用途连起籴 


张取数据，但不改变服务器上的任何 
卓物 n 

送出 Ajax 请求给.服努器 t 造成响 H 


f 专送歆倨至服务器 ， 但会造成服务器 
上的改变 9 

让 Ajax 成真的标准 JavaScript 对象 B 


M 干商化 A」a jt 请求 W 响应的肖定义对 


s % d () 方法发出 Aja 
(必为 GET 或 POET) 


09/16/3008 
' Tbeae dfflSJEB . 扣杜 
- C1ll?S8'P® r ^ -rPH-? 













动态教据 


交 茧式网 资就从 清求对象孖飽 

无论 Ajax 如何 陡用，成者试 S 用 Ajax 取 用何种 数据，任何数婼的 Aja K 通愔都 
从 m 请求”开始 a 所以， Ruby 把 YonCube 转换为数据驱动程序的访.项任务, 
就 是对包 含博客数据的 XML 文件发出一个 Ajas 请求。 
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嫌笔上阵解答 




淸设计创建 AjaxRequest 对象的代码，然后用它送出对 
XML 博客数据的诘 


O vara iax^eq= new Ajax^equestn ： 

n a' h M h U h ,1^1 I 顯 IhJ ■ rl ^ I, m h d L ■ ■ ll ■ I 臞 . ■_ ':■，_ ■ J La n 邏 l> J U ■IfgP'^i J ■ I ■ ■ ■ I. ■ JH ■顯 JBI SIB I. dldhrfhJIb fit . ■ !■> B I 驪 fcrihri ii fa d h>l_J a b ha i_ 

a 』* 电 ji 个從 t 4 泶 © j iaxRea.send{ H GET f： . "blog^m l''. handleKeaue&tV \ 

© 4 我们 . o ■偉从承身薄 "*~^ fi f'j ^ jiL f * o ^ 

X ； 较舷數掮。 fl 蟪艰中栌 url 邱分相 龙:中 iiS ; U 有？太金义. 

盎？ WiL 丈作名彷。」 


完工后爯畤唼我 

送出 Ajax 谪求后.浏览器的角色改变了——它+再等待来自服务器 
的响应。但因为 Aju 谓求通常为异步发生 t 用户可以继续页交 
互，同时浏览器也在藤后等待响应传来 - 換句话说， A , iaj ： 请求不会在 
服务器处理淸求时哲 停网页 b -旦诸求在服务器上处理完毕*它的响 
应則在 JavsiSLTipL 代码十 使用回调的请求处理器函数处理。 


容户端撖本使 ffl § 
定义的桫谪凾数处 
理 Ajax 谙孝齣啗应。 



❺ 

❻ 



handleReq^iest () ; 

防试 4 ^ ftfl esf ( J 

龙 ft 笼义. 51 必娥必 
坤本媒淇， 
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动态数据 


处理响应 …… 天衣泛縫 

白定义的谪求处理器 K 调_数，本例中为 handleKequest ( h 在 A . jaj ? 
沾求结束后立刻被调用 t 赊了表示诮 求已 完令成功，这个函数的工作迚 
包栝根据服务器返 F 1 的响应数据而行动。 




AjsxRequest 对象的方法具有对 Ajax 响应数据的访问权。 


消求处理器_数提供封 Ajax . 响应所返回数据的防问，透过 
[Wj 个 A j a x R e q u e a n ^ jj ^ : g 0 l R o s p o n s c ； 'T c > x t. { ) 

gRtResporLseXMl.f 


典 jajell 修 quest 


getResponseText {) 

以纯文本的格式取得 Ajax 
响应里的访问 

getReeponaeXML() 


只有我们提出的其中-个方法，能访问任何给定响应的 
H ■行数据，也就是山数据格式决定应该使用的方法 。所 
以， getResponseXM].U 在响应数椐为 XML . 时使用，此 
时的如1_!1£叩01^&_化乂[：{) 无法返 [ 6 1 有总义的数掘。如果 
数据是纯文本_而不是 XMU 則情况相反 - 


以结构 XML 代码的格式取得 Ajax 
响应里的数据 





我们知道 X ML 代码的结构很像 HTML 代码，你可以如何在请求 
处理器1访问 XML 的薄客数据呢？ 
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□ 0M 是我们的救呈 




Kuby 的解谜技巧與足 实用， 她想到使处理 XML 响应数据，这 
点完全士:确。把 HTML 当成 W 点树处理， mnOMjf: 非限定为 
HTML 铲用，也就是说，它也能把 XML 当成节点树而处理„ RubySm 
要把她的 YouCube ■博客数焙视为众多节点 B 


； c«-p iftLfcaiwa ycLni«J - - > 
viT-jfli ； ■cMticpng>cIi»5- ,! /@L.i：*rfl 


爸饨够 S 含符， 
% H T 抓栌 格式 杉-荃 a 


Ruby 需於从 XML ■数据界点中提取内容，这是个反餐的 DOM 任务，比 
较适合制成函数。无谓地在 YmiCube 里加人一堆虽豆 代吗并 不合理 a 


子 H 
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动态数掮 



自定义的 getTextU 凼数处理深探 DOM 柯中元索的单调工作，并拉 
出所有元索内容 6 



假设 XML 响应数据已经全都存储在变屋 xmlData 中.请写出 
设 S VouCubc 签名至 XML 标签 < au ^ hor > 的程序代码， 
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磨笔上阵解苔 



板设 XML 嘀应欸据己经全都存储在芰 f xmiData 中，请 
写出 设置 YfitiCube 备名至 XML 标签 ^author> 的程序代 


Bloa, prototype, sid nature = “by + aetTeKtfKirslDa ta. aetE feme nt&SyTa ^ hi a fa utho r v J f 01 ]; 

I fii <J Mid _ J la il la iJ i.i .'I l H ■! I b I m I tf B4 J li J t I fii .1 J il W I &■ I H k H I- d h n L J M ■ ■- H mI ■ 山 _ 8 -_ ，讎 ■■ ^ ■: m Em _ Uj- m ■■ -■ ■] ■ n ■ ■ ■■ _ aa Bi ■> m ■ m «■ ra m m 4 ^ ^ ■ m Jj J h 


基个裘昶乜 _ ㈣ (S 

C 3 的 piotcftj/pt 的 a 


协 胪 * 茧. M 磁舣 
< aitt h m > 杉冬的内 ® # 


夺 H 想 M 笔在 it R 荀一个 
—个； t t a 



A | ax 处理&擊冓慯掩齡 

本周主题： 

Ajax 的请求处理器 handleRequest () 大告白 


Headfirst ： 我们听说你很捎长响应 Ajax 诮求„堉问 + 
需要哪些枝能呢？ 

h a nd ] cRcq « c S t () S 当 Aju 诮求处理完毕，我就破找出 
来处理响应，响应通常包含服务器传來的数据 & 我的 
工作首先要确定请求在股务器上的处理没陶题.这项 
检査通过了，我才进一步挖掘数据，并在需要时处理 
与网贞幣合的莩宜。 

HcadFLrst ： 所以你其实在请求处理完毕后才被调用 

m 

haodleftcqucstO : 对啊，萆次上，我在请求处理过程 
中会被调用好儿次，但多数时候. 大家只 对我在嬌后 
做的車情感兴趣， 

HcadFim ： 原来如此。你怎么知適谪求什么时候完毕？ 

handlcRci | uest () * 这个嘛…… Ajax Request 对象有几个 
能让我 Pffl 来检査洁求状态的方法，以确保頃求戍助 
处理1没冇過到麻烦。 

HeadFirst ； 完成后 T 你又怎么知道该做什么爭？ 
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JiandLeRequestO ： 这点就呑我要怎么做 记得 吗？ 
我是个 A 定义函数， 所以毎 个程序中的我都不一样。 

HcadFim ： 为什么会这样？ 

handLcRcqiicstQ ： \ M 为不同的应用程序使川响应数据 
的方玟也不 •样 ——完全裉据程汴既身打造。我也一 
样。 

HcadFim 方一下， 你是说有人必须为了不间程序而 
重新设 I 十你吗？ 

handieRcqucutO ： 没错,但是非常合理,像昀物车 
程序对 Ajax 响应的处理，想必与博客的处理作常不 
同„ Ajax 确保服务器处进完请求后我会被调用 T 接下 
来的一切都完仝 S 身打造了* 

H ^ dFitst ： 这么说柬，创 违—个 Ajax 驱动的网页时， 
部分 I 作包括创逮自定义的谙求灶押器哕？ 

ha tt die Request 0 :正是如此，这也是 Ajax 应用程序最 
主要 I 作的地方6 

HtadFimi 真是 ** 听君一席话，胂读十年书" n 小人 
的疑惑顿0^■豁然开朗啊！ 





动态数据 



乌 JavaScript 的注解者夭人含一 

你的任务是托演 JavaScript 的注藓老，为 T 
列 liandJeEeqqestt ] 由数代铒加上蘚粹作两方式 
的注箱 t 7笼个魔术教字 ■ —蛊盃共有7項任务 
陡导白绂场的褚求准？ 


function handleRequest () { 

if {ajaxfieq. get-ReadyState ： ( ) - - 4 && ■ajaxR^q,getStdAtu 5 {) - - 2 00 } i 
/ / store the xml. reaponee diata 

var xjT,lDatrf .= a jcixFeq T getHespon&eXM[, U rgetf-'LernenTsByTagN^Ke (**b] og # !■ [D]; 

// set the blog-wide signature 

Blog .prototype.signature = "hy r + getText {xmlData .getElementsByTagWame ( ^eiuf-hor^ ) [0 ]) : 

// Create the array of 日 log entry objects 

var ent_j-ies 二 jcmlData.getElemenLsSyTagrJaine { K entry w } : 

fcr [var i - Ll f i < entries. length ； if +) { 

H Create the blog entry 

blog 」 push [new Blog (getText (entries [ l ] . get El emetitsByTagNan-.e {""body m ) [0] ) „ 
new Date (getText (entries [i ] . r g^LElemenitsByTiaqN^me I ^cl-at-e"} [0]) > ,. 
getText [entries [ i] . get Element: &ByTagNattie f * image " HO]} }); 

) 

// Show the blog 
showBlogC 5)r 
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天人合一解答 



乌 JavaScript 的注藓者天人含一酵答 

伪的任务虽粉演 JavaScript 的注 ® 老 ， A T 
刊 haHdleSUqiiestt 】 &数代码加上妈释作用方式的 
注拜 ， 7 昱个魔术敢字一是萤共布 7 顼任务陡 
- ^ ^ 导白成场的请求嚯 7 


/WL, 赶典 f P T 
<6吻> 杉爸-故板权由 

的盘珀的第―个光景 - 


// Create the array o£ Blog entry objects - 審 0 惠 . *J ^ ^ 

Vfiir entries - xmlData , getElementsByTagNiinne (""entry " )■ ; _ 不见 iSf 好 用 

for (var 1=0； i < entries.length? i++)( 

// Create the blog entry 

blog .push I new Blc?g (geLTe^t (entries [i ] T g^CEl RKiQntsByTagName ( 11 body * ) [0 ]) 
new Date(getText(entries[i]* get £1emen l sByTagNarne(^ da t e ) [D])), 
getText (entries [ i J .gcr. E1 ement s By TagHame { imaged } i01) ) ) ； _ 


>6 粕 0 i si #r * [j5 « ^ 

兩 的攀的 puffK > 方法。 



动态挝据 


YouOube 改由数椐驱劫 3 

- ~~ — - - 

Ruby 对经过 A 」 ax 整理的娃感动到鸡皮疙瘩都站起来/ ■ (让 
她节杵非常多时间）， m 她还是烦恼网沉的可 /!] 性——当博客数据 


最 斬威栌 Y 0u < Wf 玄#芎 f 

A *^ edi ts tiiLiis . co 1 hi / booki / hii ，/ 取洱。 



it 在载人的时候。 




■ m 

'^ 3 p +hm , 



笔上阵 


请为 loadBlogl ) 函数补上遗失的代砰，这个函数负贵于载入傅客数掮 
时，呈现■■等持” wBit . gif ： 

提示： 使用博客的主要 div , 它的 ID 是 Hog 、 


function IcadBlog < i { 


ajaxReg+send( H GET", M blog.xml" , handleR&quest ); 
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廉笔上阵解答 




请为 ioadBlogO 函数补上遗失的代码，这个函数负责于载入博客数据 
时 , 里现 “ 等待 " 图像 waitgit 


function loadBlog() ( / 

dMm?nt,getEkmer!tfeld( w M^ H )J.iiwrHTMt.T.^ .…. J 

aiaxReq.sendCGET% "blog 丄 xml", handleRequest) ；)iHefE4T ^ ^ oOM ^ 3t , 我们扑的 

} 戤入皡審鬼考衿 ©簿完全 J 只 會 龙加 土一个 〖 閃5 好爸耷愚个畢 




j* 

没有置极私 


^ 3 鏟后一则 YouCube 傅客 B 志的内容含有 HTML 
的 <strong> 标签，真的有可能改用 XML 表现吗？ 

答：还记得 XML 代码柜用于表度任何类型的軚据 
吧？在这里，馎客 EJ 志主体将安祛至円虹中 t 技木上 
确实可以包 M 影响主体卟岘的 HTML 标签 n 换句活说 + 
某篇日志的主体内客可以包含 HTML 标签 T 标莶則被 
视为特珠格式节点， E 4 IXML 代码一并传送 * 不过. 
这是个非常古怪的蠟 A , 玛为当 XML 安插至网页时、 
我们必烦在网贡的 HTML 代码中重新架构 HTML ■格 
式节立，与其走上那条路， YouCtibe 选择抽出所 
有 HTML #签中的内容，放着格式不管。 Ruby 还是 
能自由地为 a 志内容加上 HTML ，樁式标答，或许明于 


未来岵新版 YwuCube , 但这甚标签 i ] 前因均烙式的原 
囚而被忽略，不过文本内宕仍会保留，这是好事， 

闽： Ajax 晌应的准备 state 与 status 如何运作？ 

: 这两个特性最终恭来 i] XMLHttpReguestiT 但它 
们的 JL 作是追踪请求的 state, 例如 （0 ) uninitialized 
( 未.初姑化 .,） 或 （4 ) loaded (已权 入），也追箱价求 
的 status, 例如 404 (not found , 未找到）200 
(OK , 没问題 ） * 当然还能更进一步追踪这姿特 
性 T 位没有必要。诈只需要知道 A j a x 请求在 st a le 
是 4 (loaded) 3. smus 是。仙 …“ 时，表示完仝成功。 

所以 ViandleRequest () iiEr 技只在间时达成 4 两个扶 
态时起身工作 D 


S72 第12章 






动态数据 


不正常 的按钮 

茧然 Aja ? (对 YouCube 的全鉗松修原本发生在萚后，不应被 
YouCube 的用户#见，但硿然出现用户也看得到的界面向题 3 电秸确 
地说 T 记然网豇卜_的按 扭的运 作未如预期。 
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什么时候可以用？ 


按钮甭要数榇 

YouCubc 按钮的问鼴，在干它们只于可获得博客数据时可应用 . mm 
客数据现在从外部 XML 文件载人，金有 -小段 时间，非常短暂的时间, 
网页上没有数据。这段期间，桉钮完仝没有 E 义 t 只会用户闲慼。 



暂时禁用按钮是个绝佳的方案。 

在 hr 客餃据载入时暂时禁用按钒，是个简申又优雅的 按钮问 
mm 决 jj 式。 既然在网 mtr 度裁人时 Ajax 才发出跋入博容数 
据的请求，按钮'可以先波禁用 ， [fn ' J ： h a nd 1 eReque s t n 
涵数屮启用，这个函数知 i § Ai 以语求 tl 经处理完毕 D 

耍实脉禁 W 按钮，我们需要使用 dnpuhfe 签的 disabled 
M 性 ，于 HTML 代吗中设定这个屈性为，* disabled ' 以 
禁用按钮。和反地， LvaScfipt 代码中需设定这 个杈件 
为 false ? 以启用按 tfU 


< input type*"button" value="Search the Blog" 
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JavaScript 冰箱磁锇 


动态数据 


r ===：： r 的隱乳让按晒禁用，直酬減据細人后再启 


chtml > 

- ihead > 

<title>YouCube - The Blog for Cube PuzzLers</titIe> 

cscript ty*pe ="t&xt/ javascript" src=°cijax. js M > </scripts 
<script type-"text/javascript n src="date» je"> </script> 

^script typ-e = h text / javascript n > 


fynetion handleReque&t O { 

if (a jaxRaq . getRe-gdtyState - t )= 

// Enable the blog button^ 

docun'iertt ，- geLElejnemLById < 


document .getElement Byldl 


4 && ajaxReq.getStatus() 200) { 


document ,g-etElernenCBy IdH 


</script> 

</h&ad> 

<body Qiiload- ，i， laadftlQg t) ;^> 

< h. 3 >YouCube _ The Blog tor Cube PuzzI ers?< /h 3 > 

< i mg s r c=■ eu!be . png * alt= H YouCub& a / > 

<input type="button" id= B search" valuer"Search the Blog a 


one lick= w sea r chsl og () a - ^ /> 


■c input type = n text " Ida " searchtext * naine ^ 1 * search text " valuer " w /> 
■ediv id =* blog !1 ><7 div > 

<i nput type = _ button M id=■show 吞 11• value= * Show hi 1 Blog Entries ， 

= or5clicrk=*showBlcig () ; M /> 



<input type-"button" id^"vievrandoffn n values■view a Random Blog Entry' 

s one 1 i ck=" randomBlog (} j ： * /> 



</body> 

< / htCTll > 


■ vl * 虹 andean * 


dl sAbl^d 


" ehowill " 


false 


1 disabled . 





















JavaScript 冰箝磁铁解答 



JavaScript 冰箱硪银藓荅 

使用下面的购誠 VouCube 綱: S 代码，让⑦ ! B 5 t 被禁用, 
启用，有些磁铁不只便用 一次。 


直到]1|客数据完成载入后再 



^script t yp-e - n t ex t / j a vase r ipt H src^ n ajax- }B H > </^cripL> 
^script t:ype- n text / iavascript n src- n d&Le. ys n > < 〆 scr> 


<acripL 匕 ype ■ 二 " text/ javascript 4 > 


docanL-ant 


<input type="text■ id-"searchtext" name^*searchtext H value- H " 
<div id± *blog"/div> 

<Input typ-e = 1,1 button" id=*showaiI ■ value= fc Show All Blog Entries 
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动态数据 


省对的网络皈新增 0 志方索 



YooCube 现在已羟由动态数据所叱动，但 Ruby 还无法仝盘满意。 
她述没 卓受到 YouCube 使用动态数据的典 sH 好处 > 除作盹能使 
用基子网络的界面 ( web-based interface ) 新增博客〖 I 志 s 勺其编 
WXML 再加到博客 k T 她想直接在网 取上新 增口忐，而 a 直接 
存储到服务器 iU 


透过网页用户界面 . Ajtw 如何用于斯增博客曰志呢 ? 


編辑代码 +上传文件 == Sr 


»ae 


VouCutrt - Addtrtg tP _ Cuba . 


YouCube - Addin* to tie BUj» for Cube Ptolers 

Diit ： [l 0 /M/ 2 D 0 « ______ —- ~— -- 

Body: |Fcn really looking fofwJfcMc 仙 puzd * party IT 加 ⑽ Of Ih* 刪 i 士 

Image, (opdonab;! ^ “ 

“iUidih*N*wB 吋 Ervtry I , 免坩陣吝栌叼 Si : ， f 3 用 表羊蜮 试人三珀诨 

吝 OS 袅馮, 


獅坩 埤客 0專.只禽裙聋地 
成写哝吞孩 T ^ i £ r 


勞 60 奶姑 


Ruby 想有个她的 i 用干贴上新的薄客11志的网豇，她只趄在这个 
网迈里垓写表取 - 钻次吏新陴客对她柬说都是弹指小車，而11她只需 
耍浏览器，不用准备文本编輯程序，不用孑找 FTP 客户端 t K 要带着 
她的满腔魔力_热情就够_1\ 
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客户棵与服务器辋……又出现了 


写出博窖数提 

从 Ajax 的角度思芩增加两客数据时，大概就婭想挚衬服务器传送一 
个 Ajax MOST 谪求_其中包含新的陣客 Pi 志数椐 （ 然后，服务器把数 
据写人 blog.xml, 作为新的博客 F 1 志。此日1的 Ajax 响应没有什么作 
因为没有返 M 的茱西 。 




JavaScript 并非写入文件至服务器的工具。 

JavaScript 井^ 作在 服务器上写人从冗-；™/的选琐。與 
实上，你共至无法在服务器卜.运行 JiivaScTipU 因 
为 JavaScript 是种客户端技术.它设计为只在浏览器 h 
运作， 这电的 特殊怙况屮， JavaScript 无法协助我们. 
囚为我 ff ] 需耍 S 人服务器上的某个文件 !> 这个问题讣 
不少见，所以服务器端技水常与 JavaScript 合用， 

戕 mm —种与 JavaShpt 相似，但电纯在服务器 b 
运作的技术。市面上冇不少选择，但我 想到一 太 
S 杂-而且又5 XML 数据很合得来的技术…… 
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动态数据 


PHP 忡出掇手… 

有种称为 php 的脚本语言提供了我们葙要的一切，让 a 们写入博客数 
据€服务器上 XML 文件。实陆任务包含了读取 XML 文伴 . 新增曰志 
到瑰有内容中，然后把整汾博客志写回原始 文件。 但一切又回到从 
玄户端浏飪器发出~抓请求，以在服务器上获取新的博客 S 志数据„ 


RHP 是#玎在服务 
器上执行任务的瞄 
本语言。 



Date z 

10/04/2009 

Body i 
Image : 

[ mmm 

■I § m really looki.ii.gi - n 


的 P #. 味 冬趄蛀 
饵客5專.然后五入以。 s 
*ml i ff □ 


^HP 的匍君楚斛 

JflvflSitipi, {v PHp 4 

m 务基魂达 o . 

$ > m,, 


b^og-Kml 


你可以把 PHP 想成■务器端的 JavaScript , 它在舭务 
器上运行，可以执行白定义任务……例如把博客曰志 
作为 XML 数据写人文件里 T 


Patei 

10/04/2008 

Bodyi 

p m rsally looking - -. * 

images ： 



Date; 

1Q/04/2008 

Body s 

W I _m really looking ■ ■ - 

Imdgrfi S 



於的 择害0矣读夺 Afar 
枋 POST r (OM 

f s 务基， 
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服务器端的甜头 



PHP 

上菜 


載入純 XMC ■轰舄至 


変寺 Sidhiiiti #. 



如 I 馎窬 i 件珐米佴在 

射虚一伶空仝的 XW 1 C 找 


(tile“exists ($f i 1 enacr.-E))( 
f f Load Lh^ hlog entries from the XML fils 
$i tawB 1 og = £ i le^geL^coiaLentB [$f ilename); 


// Write the entire blog to the file 
Sfile = fgpen<$f i] enajne„ 'w') 

fwrit-p i S f i 1 e , Sxml >asXML ()) 

(clogs(/&£i 1 b) i 氏、 

?> 


以漸的详穿果对殖骂 


X% 


蠢岡觀 


addblogentry.php 

t 

PHP 卿本■存货在 

ph V ±^^, 


问 1 :我必须使用 PHP 写入文件至 
服务器上吗？ 

答 :不用 ■ 浼这闰 T * 卟面有很 
穸设计脱务器端脚本的技术 v 像是 
Per ] ( CGI ) Java servlet , 它们 
也能达成 PHP 的任务 _ 如果饴已经 
习慣某种技术，定全可以使用它创 
建你的 Ajax 程序的脱令器鸪组件 a 


^ :我可以使用 Ajax , 但完全不 
使用服务器端的程序吗？ 

^ ; 某些状况下， T^X i 位大多数 
时蜈 T 没办法 。 谛记得，畛了最兩 
单的请求> 所有 Ajax 请求郜牵涉到 
服夺葸瑞接收来^客户鵠的抆抽， 
然后根据数据而行动 n 例如寻找数 
槐戽£的果令东西，或写入 i 果令 
文件-气数拉库 11 YouCut >(； 的主耵面 
祀是是间 ft Aj ax 清求的好例于.它 


間单到不需香任何砹 务器 端脚本 a 
太多数 Ajax 秸序没这么好运，所 q 
你多半宋要某种权度的股务器端编 
赶 3 真止的问题在于无论如何 T 稂 
务器可以返回整份文忤(如 &/ og . 
xmi ) ' 或于服务莕处理致极（如 
'写入数据 ） 。 幸好，许多 . A」a s 应用 
程序需要的脱务器葙跏木都相垒司 
单， I 算你不是服务器葙脚水鴉喵 
技术大师_通常也看浔 
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动态数据 


叩 P 也布 t 要 

不像 JavaScript 天生就有新式浏览器的支持 t 服务器不见得非得支 
持 PHP 。 在你把 PHP 文件传上网络眼务器前 + 段好确认一下你的系 
统管理人昂或虚拟主机服务是否支持 PHP t 如果不行，你篮要尽可能 
加上这项支持，或考虑换个网络服务器 4 除非服务器支持 PHP , 否 
m YouCub « 的 PHP 脚本无法运作 d 


运行 HIP 或许索襄 
调校一 T 你的网 
络服务器。 



确认你的网络服务器 
支持 PHP . 



狀 3 J «务3不成押」铢威 
碑 t 行$窠._或 M 硌请 
臬统 tlFS 帮作去 本公 
的 吟* 一宏乘#总？ 



支持 PHP 网络服务器， 是你的第一个障 H 笛二个障码則跬找出服 
务器上放 S PHP 文件的位置， t 午多0彳候，把 PHP 文件与 HTML 网页、 
外部 JavaScnpt 文件放在一起都没问题。然而 t 有呰 PHP 的安装比较 
挑剔，耍求 PHP 脚本存储在特殊月录下 E 同样地 t 这个向题还是耍诰 
教系统皆理人员， 


一且你找到 PHP 文件应该存放在网络服务器 
t: 的位盥时，.就准备好把文件复制上去，并可 
继续创珐新增 YouCube [f 客口志的网页了。 
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有 _r 在服务器端运作的 phi \ 还有放对 位货的 php 脚本文件，我们可以 
更仔细地检验 PHP 脚奉的需求，才葩在服务器端写人数据至 XML 文件。 
如此将协助我们达成设计目标一以 Aj^ 111 求对服务器提供完成任务所 
盅的和项。 


数梅透过 Ajax 清求 
被供给 PHP 脚本。 


PHP.W 本的预期中 T Ajax 传来的数据将是新的博客 R^ n 我们知迢这呰数 
据全少由两种信息组成. R 冇可能包含 三种 信息， 

Date A 

博客 H 志的 R 期。 1 _ _ 


Image 

博客口志的选用 ra 像：' 


I 戶縷的 ㈣ Setifu 代鋒⑶ 
猫龙赶湖勿色威軲郜 
戌填 迗往采赉器的格式. 


这段信息必须能被打包成 Ajax 谓求，汴1作请求送往服务器，服务 
器处理信息丼存储信息到 biogxml 文件中 - 


现在的挑战是设计新增博客日志的 网页， 昏先呈现用 P 输人新博客曰 
志的用户界而，而后收集怡息，并用 Ajm 谞求运送信息到服务器上, 
奸消息是我们不需要响应， 或许 只要确认新博客 a 志成功存储即可。 


582 第12章 



磨笔上晬 


动态戣据 




规划新增 YouCube . 博客曰志的网页设计，谙濟楚列出 Ajasf 请 
求与_应在数据流中的影响。 
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薄笔上阵解答 



规划新增 YcuCube 博客日志的网页设计，请清楚列出 A]ax ^ 
求与响虛在数据流中的影响。 


律菩教祙讳求 
中的盘昶缚达至霣务器 










动态 M 据 


组含 代码：芨表 文豪到博窖龈务器上 


Aj 狀的 POST 谓求比起 GET 多了一些耍求，因为玄筘要 f 专送数据 
到服务器 il 。 虽然 POST 谪求支持不同的数据打包方式，受信赖的 
数据域 URL « i C mliii S 技术已足可胜任，这项技术就是浏览器透过 
网页 URL 传送域的数据给服务器的相同技术 f 特色 就是汉分每段 
数据用的&符号 



"date^l 0/04/2008&body=I l m really looking forward. . . & image -： H 
— 通舶邛由名彷 / 僅对 \ s 跋教鉍灼以 & 和 it 


在这种数撋打包方土屮 + 飪段数据需有 S 己的名称与位，中间插 
人等号 < =) s 每对名称/值中埘则以£瓦隔。这种格式称 X ? URL - 
encoded , 其数据类型设背为 AjflA 的 POST 诚求的数据类型 6 

它基 URL — emeflJe ^數越的 

_ _—式蛊 t 必效办 POST 减求 

中推左 。 

*■ appli cat i on/x -www-f orm-url encoded ； char set: 土 UTP — 8 ■ 


把博客 E 志的格式设为 URL-encoded , 并设定 post 谓求的数据类 
犁后，我 f 门终十准备把消求的代码拼凑起来，并传送数据至服务器 s 
让数据存储至 blo ^ mi 文忤电 e 



把下列数据片段打包成适合 POST 请求的 URL encoded 格式 E 


releaeeDatei 01/1^/1989 


title ： GleamLns the Cube 


dlijfectofi Graeme Clifford 
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满足你的好奇心 



m 秀 


把下列数锯片段打包成适合 P 05 T 话求的 UftL - encoded 格式。 


titles Gl^^Mlng the Cube 


01/23/2983 


director ： Graeme Clifford 


'' tftie=G learning the Cube & relea 5 e patef =01 /13 / 193 9 &d Erector - Gra eme Clifford " 



闲:如果 YouCube 的新增博客脚 
本在 Ajax 请求中不需要任何来自服 
务器的数据_为何还要费神处理这 
个请求呢？ 

^ - 因为知 違请求 乙经完成仍然 
很重夹。即僥我们不需要賸釦器返 
邱任何数掂以响应请求，我们仍鸪 
#常需要知道请求是石完仝成功以 
及何时成功 4 脚本才拒因此决定佯 
出 akirt 樞，确认搏客 a 志的新增成 
功， 

^ : GET 请求也能用于新增簿客脚 
本吗？ 

答: 技术上可以。技术上 t GET 请 
求仍然可能俦送麩据 i 服务器 ，担 
你必涓直接在请求的 URL 中指定 
敖板__这点不是何題——问题 A 于 

GET 并非为了改变服务器状态的情 
死而设计，此时，服务器状志绝吋 
冯为写入博客3志到以 og . xm / 而改 

Z . 蜱以 POST 请求才是正碉方式. 
就算不为别的原也是因为它明 
确指 ifc 了与服务器通信的免图: 


: 既然服务器在处理 Ajax 请求 
以及存储博客日志时 都需要 时间、 
如果新增的按钮在请求结束前被按 
下去 t 会发生什么问题吗？ 

等： 是的 + 会有門越。每次接下新 
增按钮 （Add the New Blog Emry ) 

, 都会取消 S 前的 A 〗 ax 谛求并开 
店新 请未。 虽然按钮两次的人或 
许轧是要这种效果 t 但用户界兩 
如菜能在请求处理期冋移哝桉钮 
的_捍.界曲将显辟更清楚，辦 
以:斬增博客 a 志的代玛应该在处 
玴 Ajax 请求时帟用新增桉乜 + 等 
请求处理完毕才再度 启用， 涞这样 
对用户界面的小改交，枚久下来可 
能 iL JavaScrjpl 哲序更 直觉、更容 
务使用，也让用户更高兴。 

问：博客数据中的空格为什么在构 
成 URL-encoded 字符串后就不见 
了? 眷来 空格有时造成 URL 的问题。 

^:空辂在这里不是问題，因为 
Ajax if 动功會据的处理，丼磺认 
數#以恰去格式抵达服蚤器。 


:既然图像是博客的选用内容, 
新 增博客 S 志时，^定要传送它的 
数据到服务器上吗？ 

^ :不用，不需如此，但琦记得， 
在 URLTeittoded 字符串中，传送空 
飯极，在等号后不加任何值，其实 
浞有关系，如下所示： 

■date = … ■ irbody = . . . & i[nage= ** 

上蚵中 1 ra 嘷数据域仍然被送往踉 
务溶.虽然它并未包含任何数拢 a 
这就是服筝器瑞的 PHP 脚本闪内发 
亮的 地方、 因为它 I 聪明地理解了 
塊 f 象域为空白，所以新的博客0志 
没有 图像, 
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动态齩据 



// Send the new tflog entry data as Ajax request 
a jaxReq, aend (" post", "addblo^ent-ry .pVjp" t hand] eRequest r 
"application/x-www-form-urlencoded; charseb=UTF-6 n , 



function handleRequest [) { 

if (ajaxReq,getReadyState () == 4 && a jaxReq,getStatus{) 二二 200} f 
/ / Enable the Add button and clear the status 


// Confirm the addition of the blog entry 

a]ert("Th^ nev? blog entry was successfully added."> ； 

} 
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磨笔上阵解答 



请为 youCube 的新增博客脚本填人 addBlogEntry() 与 handleR 母 quest(} 
函数中失落的代码。 


function addBlogEntry() { 

i / Disable the Add button and set the status to busy 

^ document. aetUe meritDyEilf'adet'ld \bb bled = true; 

■i r T pa r t r t r i p tr- 'l■l■^■*^ ， ^■ ， I■1 丨 1P rtP ■ !• r vi'ararir -mr '■■■■■■rBrainriBiBiBiBl 

document. ^e%t\e tnent; 5yldi 栩 d innerHTML = 








Addirq 

.--- p ， - . 


// Send the now blog entry data as an Ajax request 


dpcurnent^etEleftient E^Wt^dd'l.disablcd = fal5F； r 
document.jnnerHTML = 


} 


} 


启角坩括钻 枓沒狳 枝各®遠 
® 婷構客 €1 去 3 铉砵柬存 碡」 




















动态剋据 
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可用性是王牌 


zt YooCube H . 好用 

能拿到三度空间魔方的黑带检定，势必相3注意细予。所以 Ruby 进一 
步耍求让新增埔客网砑 绝对 完美，似乎也不太让人意外 T \ Ruby 
道，讲到对可 W 性细节的注 t ， Ajax 应用程序相当出名。所以她希望 
改苒新网 页的可 用性，要与当代的新潮网 页比羌 。 




YouCube / Addin « to — « Bl . fur Cubfl Pufflura 


t 功铨入 S 3 前的 e ? 


YouCube 博客曰志数据 * 大化 


既然大部分陴客 H 志都在"现在”制作， Ruby 想到 t 在博客 
丧单的 PJHI 1 域 ( Date ) 里纟彳动填 b 今天的0期 （ 可节省+少 


士贵的打卞时 「 Fij n rftiii , 既然大多数博盔□志会使用现在的 


U 期，她芾空直抟把输人焦点移到农申里的正文域 ( Body ) , 
如此一来、地即可在网页开宕后直核输入 B 当然，这些改变 


对「-博客的运作算+卜.极端里要，而 R 也未直抜与扣关， 
似它们戏剧化地改 fi 了网豇绐人的“感受”，这差不.多就蛙 


Ajax 的楮神。另外，也能确保 Ruby 更勤快地更新博客„ 


把辕入 保点设定在3 f . 
ik 知打 ft 泛蚵好达粉入供 





动态戣据 


为用户 I )动垠写域 

如果你 还有印 象，陴客 H 期格甙为 MM / DD / YYYW 我们栄赵确 
保白动填写至域中的日期也采用相 ㈣ 的格式^所以 t 我们盂发:把 
口附的 H 期格戎设为 MM / DD/YYYY 的代 P.L 



共享通用代码一向都是避免重复的好想法 a 

我们绝对+希望有 f £ 何重苠的代矾仵 YouCube 吧游荡.以免 
需嬰维护叫次 ， 所以网 UllHlJt f-U 期格式代码是很好的主怠 D 
一定有方式#储代码仵坫个地力_, Lhf £ M 盅要的网页都能取 
用. 


如何 让两份 VauiTLibe 网页共享 shor LPorma^. (y 的程序代 
码？ 


wttm 
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导入导出 


重复的任务？不如采个也数 pg ? 

在多个共羋 JavaScript 代码，包括把代码另外拆解成一个文件成模 
， ( rnodule ) T 然后挣人文件至每个网沉 c AjaxEequest 时象巳经做过 
这件車，它存储仵文件电 + 然后以艿列程序代码谇人/ 

“™ S C H P t 全件的名你议4 
给 <5 ci ( pt > 杉签的 Mr 保_ _ 

ft n 

<SCript fc VPe='text/javascript - src=»ajax. jjr > c/scripo 


熟悉的< 3 叱 01 >标 
签用子导入存储 
在外郎文件中的 

JavaScript 代码。 


Date 对象的 shortF at{ ) 方法如果放在也化々文件里.然后被 
睁人 YouQihe 的两个阈页，它也能达成枏_效果。 … 



类似 f Ajax 代码使用的< script > 标签，现在用于 YouCube 的两个 
网页中，以玲人存储在的脚本 & 

〈script typ e =-te>£t/i ri vascript" src= ".date-Je "> </Bcript> 

JaI (? . js 的史整 兩審. 

只用送 个 < sctipe > 

籽爸舦钺与入 ■_ 




this,get FullYear 


^ date.ja 


::保 ㈣㈣ 却丈件二 


把 4 冉利用的 JavaScr 中代码另外分成它白己的文件以供分儿乎不^ 
是个坏主总， ' ^ 
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动态数据 




笔上阵 


淸为 inUFormU 函数设计程序代码.其中调用 YmjCube 新增脚本 
的 onlc ^ d 事件处理器，函数必须以目前的日期初始化日期域，然 
后设定输入瘅点给正文域， 
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磨笔上阵解答 


吧答 


请为 initFormU 函数设计程序代码，其中调用新增脚 
本的 onload 事件处理器 ^ 函数必须以目前的曰期初始化 B 期域 T 
然后设定 输人焦 点给正文域， 


€1 I 

帥 hrfnD . J ..... . . . . . .. 

..rfw 剛邮納 EkfM 咕 WC 办 ¥} ㈣ 败〒 - {newp3te()),&hGrtF<f.rmat(); 




设定给入谋点今 


3PC 翻邮碱 0 娜抓 ? ySCWyife 盱 0; 


馎窖的生产力一飞冲天 


i 间 由节戊 栽入 
吋 . 给人玄 



Ruby 终十完全满息 YmiCube 博容。她的博客既为数椐职动 + 乂对用 
户很友爸，郎要感谢 Ajax, 述有解谜大帅对细节的坠决信桊 t 


战呷每加 Pu «|^ 

BJoffEir Cub® Puz^jert 
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动态数据 



JavaScript 填字游戏 

你感觉到动态了吗？来点搭配活泼态度的数裾如何？填 
宇游戏、就是它了，上吧！ 



横向提不： 

2. 蚁务 E 碱的脚本編伤技术，与 Ajax 应用权序里 
的 JavaScript 互朴， 

3, 服务器对 Ajax 请求的答案。 

5. Ajax 请求结束时被调用的 A 数。 

S . 这唷技水用于让内瓦史有反应， 
t ). 这种較据让 H 页更有趣， 

10. 支持 Ajax 功能的括准』 avaScript 对象 v 
!2 -連常只句服务 HI 求数据的请求类型 . 

M WH M I ? «：_ VI ?■- 


纵向提示： 

1..HTM!: 中的 a Ml.: 代表 _ Language „ 

1. ill 常还会改定报务器状态的琀求类型。 

4. AjaxRequeftt 对象里的一个方法，用于发出请求 D 

6. 为了同化 Ajax 的使用而自定义岣时良 a 

7. XML 的 U X B 代表 „ 

10, 使 <h!og>, <author>, <entry > 可被利用的事物 u 
1L AjaK 向踉务器要求数挺，称为 _ . 
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JavaScript 填字游欢解答 



JavaScript 填字游戏蘚答 
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动态数据 



请垂直对折本页，模拟左 
右脑的 K 分 h 并解决我们 
提出的谜团 u 


Page Bender 


Ajax 为 Ruby 帶来什么？ 




Ajax 帶？很多东®給 Ruby _实在 
很碓竣一列举。动态数据 
是其中 一项，让魔方 
馎窖的经营更容舄。 Ruby 规在能 
轻柁 M 诂论她的魔方3。 
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旅程继续 


你的后锿旅程 




你终于走完这一趙“深人没出 h ^ Script ； 1 之旅.也准备维续带 
若 JavaScript 紈上创违交互汊用户体验的道路……但是 f 下一站应该 
边哪-站？仵你为万维网大荒奸 fTf ■建立应用程邝时，我们力你极供 
一呰4能有兴趣的岽点1 

深入浅出 JavaScript 

被农达式烦到 avi 二 J ： 呜？被运 W 符掩得眼 n 金垲吗？或 
开你想 .W He iid FIm H K 分 V 姑新的 Ja vy S t:ri p t 发明呢？欢 
迎光临 Hefid First Labs { bitfi : // it - ww . heaAfirstUbi . tom '] 的 Heatl 
First JavaScript 讨论聞并加人现有的讨 i 仑…… 虹欢 迎你自己开启 
新的讨论! 


在 ft 成右转？该掌 


你 CL 线常促了耍点，可以准而深人进 
阶 JavaScript 的电 1 M ? 卜外„ 


Oava'Stript the Dcliniliv^ Guide 》 


^JavaScript & DHTM 1. Cookbook )) 


补充书籍 


向其他网站学 




Qui rk^modle /ittfi ： //wuw- ^uirksmti^e. org 


裉可措,不同浏览器有时自有一萁解释 JavaScript 的 方武 。 Quirksmode 
提供了 Ja vaScr ipt 在浏览器上不一致行为的内幕消息_ 


Maxilla JavaScript Reference 
h ttp:fMeveiopd moziiL^ org/rn/d&cs/JapaScript 


很快,你栂哲时放下丰边的一团乱麻，试图寻找更多 JavaScript 内 
说对象的 Q 息。欢迎利川 Mozilla 的仵线#考文档，探索 JavaScripi 
飪个不起眼的角落 C 密幸％ 


Prototype JavaScript Framework 

http：//prato typejs. 

沿.不住想尝忒第~方程序库的口味，把你的 JavaScripL 代码带人令新 
结次吗？ 这哫是 蜮奸的■:之一，而且完仝兔费！ 
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深入浅出 JavaScript (中文版) 


JcivaSHTJ'ipl /W'vb Prngramming 


你将从本书学到什么？ 

这么说你准备从写 HTML 和 CSS 的斿态网页跃进到编 写动态 网络应用程序脚 
本了？这里就怂起点，《深人浅出 hvaSciipt 》 带你游历令人兴奋的交互式网 
负创让过程，为广启发你的思考，本 t 覆盖 f 所有的 iavaSoMpi 呆本知识，从 
基本网络编稃技巧，釦变函数和循环语句，到髙级一挂的专题，如表黾 
验证、 DOM 枨作.客户端对象，脚本程序调试——甚至娃 Ajm ! 赶快跄好淮 
备……快速响应的网站肉你只有几页纸那么.远。 


fi 菊 SavaUpt 样 





助人们交 

1 


式 EK 來柃位 
吏辈14极 




0FSH "imm U 1 si B" 




t 用婷係定 * j 


餚分 f $兼孩枣南的象# 
致 M 轺姑的拽客珣站黾请 


yelccMie 


SUCK FIGURE 
^ WVEMTURE 

.- 4 杏一次 

网 i 承垮 4(1 

的承史 


tc 

>taH：... 


|&UP« 


为何本书最上去如此不同？ 

我们认为你的时间如此宝 t 以全于不应读花费在为新概念伤瞌筋上面 。 m 
人浅出 JavaS ^ ipa 用最新的认知科学和理论打造多感官的乎习体验，它 
运用丰富的视觉样式激发你的大脑工作，而不是密密麻麻的文字 Lh 你右广昏 
昏欲睡, 


责任 编辑： 张烨 

封面设计： Louise Barr , Sieve Fehler, 张健 
O'Reilly Media , I me . 授权朱龙大学出版社出版 
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菲常实际而且有用，同时也 
解释得非常清楚本书在向一 
个完全斩手介绍 JavaScript 时 
做得非常出色，并且本书 
是 ‘Head First [深入浅 dp f 
系列教学风格的又一见证..与 
其他关子 JavaScript 的书相比. 
用《深入浅出 JavaScript 》 来 
学习是很棒的1想想其他的参 
考书都有电话簿那么厚 - 

——学生 
休斯敦大学 it — y 〜 
fhiushtu I 

#一个初级 JavaScrtpl 开发人员 
的完美选择^ 

- I'if 'tt iu*} i\ 7 orjjy , 

网络开发人员和设计者, 
乔治亚理工学院 U " m.gift 

fn 、 im 乂 U i uf 川 /i».m I 

u 经典 ‘ 深入浅出‘系列里又一 

本伟大的书箱1 ” 

——- i U 
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